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

【问题标题】：font-size increases unexpectedly in mobile webkit移动 webkit 中的字体大小意外增加
【发布时间】：2014-01-17 09:40:06
【问题描述】：

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

工作原理

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

问题

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

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

受影响的设备

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

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案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 似乎被某些浏览器忽略。

【讨论】：