简而言之，我想做的是编写一些 jQuery 来font-size根据屏幕宽度设置三个 div 中的哪一个。
我已经在桌面上的 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});