字體大小使用jQuery不工作在iPhone

Question

簡而言之，我想要做的是寫一點jQuery，根據屏幕的寬度設置三個div的font-size。

我已經在桌面上測試了Chrome，Safari和Firefox上的代碼，並且它都工作正常，可以很好地擴展和縮小。在iPad上進行測試時，它運行正常 - 包括Chrome和Safari。但是當我在iPhone上測試它時，它全部崩潰了。

當頁面在Safari上加載時，js似乎沒有做任何事情，字體大小也不會改變。但奇怪的是，當你旋轉iphone時，字體確實將頁面的大小改變爲正確的大小，即使我沒有編寫一個.trigger函數。

讓我更加困惑的是，它在使用iPhone上的Chrome瀏覽器查看網頁時似乎有效。

我不明白爲什麼我的代碼不會專門在iPhone上工作！

這裏是我的jQuery

//Gather the screen width and height 
var screenwidth = $(window).width(); 
var screenheight = $(window).height(); 

// set the width and height of the box based on the screen width and height 
var boxwidth = screenwidth - 80; 
var boxheight = screenheight - 200; 

$("#box").width(boxwidth); 
$("#box").height(boxheight); 

//center the box along the X and Y axis 
var boxX = (screenwidth/2) - (boxwidth/2); 
var boxY = (screenheight/2) - (boxheight/2); 

$("#box").css({"margin-top" : boxY}); 
$("#box").css({"margin-left" : boxX}); 

//set the font size of each div based on the screen width 
var box1font = Math.floor((screenwidth/100) * 8.8); 
var box2font = Math.floor((screenwidth/100) * 6); 
var box3font = Math.floor((screenwidth/100) * 1.6); 

$("#box1").css("font-size" , box1font); 
$("#box2").css("font-size" , box2font); 
$("#box3").css("font-size" , box3font); 

//center the divs within the parent element 
var inner = $("#wrapper").height(); 

var innerX = (boxheight/2) - (inner/2); 

$("#wrapper").css({"padding-top" : innerX}); 

Answer 1

嘗試添加CSS屬性-webkit-text-size-adjust: none到您的網頁。