移动 webkit 中的字体大小意外增加

Posted 2023-03-12

【中文标题】移动 webkit 中的字体大小意外增加

【英文标题】：font-size increases unexpectedly in mobile webkit

【发布时间】：2014-01-17 09:40:06

【问题描述】：

我正在为移动设备优化一个网站，我几乎完成了（耶！）但有一件事让我绞尽脑汁：

工作原理

我使用 CSS 重新设置标签栏（实际上是一个列表）的样式，使其像下拉菜单一样工作。当触摸唯一可见的列表元素时，jQuery 在ul-元素上切换类“打开”，并且所有列表元素也会出现。这就是它的工作原理。

问题

当展开下拉菜单时，它的字体大小从 15px 增加到 19px。在 Inspector 中，绝对没有任何暗示为什么会发生这种情况。添加font-size: 15px !important; 之类的规则无效。

我为你做了一个小截屏：http://youtu.be/MUTJfTK70PE?hd=1

受影响的设备

android（三星 Galaxy） ios（iPod、iPhone、模拟器）

Windows Phone (Internet Explorer) 不受影响（哇！）

我会非常感谢每一个想法！

【问题讨论】：

还有一个有趣的点：字体大小只会在横向视图中增加。

【参考方案1】：

您可以尝试添加如下内容：font-size: 1.5rem;

【讨论】：

它没有任何作用，它只是降低列表元素的高度:(

最后一次尝试。用户 em 而不是 rem。我正在使用类似的导航和作品：/

也没有运气。您是否也在移动页面上使用它？在桌面浏览器上，导航工作正常。

是的，我同时使用 BlackBerry 和 iOS，它运行良好嗯

【参考方案2】：

事实证明，Mobile Webkits 字体大小调整是起源。 这条规则解决了它：

-webkit-text-size-adjust: none;

【参考方案3】：

在 html5 中，最好通过在页眉中显式设置视口来解决。声明

<meta name="viewport" content="width=device-width, initial-scale=1.0">

关闭移动字体大小调整。将 text-size-adjust 设置为 none 的缺点是在移动设备上禁用缩放，仍然需要大量前缀，并且值 none 似乎被某些浏览器忽略。