使用 jQuery 的字体大小在 iPhone 上不起作用

Posted 2023-03-06

【中文标题】使用 jQuery 的字体大小在 iPhone 上不起作用

【英文标题】：font-size using jQuery not working on iPhone

【发布时间】：2013-02-10 01:47:00

【问题描述】：

简而言之，我想做的是编写一些 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); 

【问题讨论】：

请不要在您的问题中包含“我们将不胜感激”。这是无用的噪音。

【参考方案1】：

尝试将 CSS 属性 -webkit-text-size-adjust: none 添加到您的页面。

【讨论】：

感谢@freejosh，刚刚尝试过，似乎成功了！