如何避免iOS自动字体大小调整？答案

【问题标题】：How to avoid iOS automatic font size adjustment?如何避免iOS自动字体大小调整？
【发布时间】：2011-06-02 05:28:25
【问题描述】：

我不是在谈论缩放页面，而是在 iOS 上的 MobileSafari 有时会自动增加一些字体大小。

具体是什么时候完成的？可以预防或阻止它吗？

【问题讨论】：

嗯...我也遇到了这个问题，但我想知道，有没有一种很好的方法来调整文本大小？我很烦人，因为它会导致我的按钮溢出，并切断我输入字段中的文本。似乎它造成的伤害更大，但也许我做错了什么。有没有人发现使用它取得了成功，而不是禁用它？
另外，是否有适用于 Android 的 Firefox 规则？
@Costa 我不知道。两个问题：（1）有没有Mobile Firefox 模拟器？ (2) MDN 有什么有用的 cmets 吗？不是问题：（3）我很想知道，所以当你弄清楚时一定要在这里发表评论！谢谢！
给你：developer.mozilla.org/en-US/docs/CSS/text-size-adjust 迄今为止我能找到的最佳信息。
我将视口设置为 600 像素，然后停止调整大小。我认为有一些“可见性”的计算正在进行。无论如何，我正在慢慢地朝着一个完全流畅的布局努力。我认为没有适用于 Android sim 的 Firefox。 MDN 上有很多有趣的东西，事实上我认为每个浏览器都有一个前缀 text-resize 或 text-adjust css 规则。

【解决方案1】：

body {
    -webkit-text-size-adjust: 100%;
}

首先要确保所有文本的大小都清晰可辨。 iPhone 和 iPod touch 的屏幕相当小，因此请记住这一点。

【讨论】：

苹果文档：developer.apple.com/library/safari/#documentation/…
请注意，这会阻止在 webkit 浏览器（Safari、Chrome）中调整文本大小，因此缩放只会放大图像而不是文本。
永远不要把它放在body；如果你想要它用于 iPhone，它应该进入一个 320px 设备宽度的媒体查询。
还可以考虑在 -webkit-text-size-adjust 旁边添加 -moz-text-size-adjust 和 -ms-text-size-adjust（以及简单的 text-size-adjust）来实现在更广泛的手机和其他设备上具有相同的效果。
@Bob Rockefeller: -moz-text-size-adjust 似乎被 Firefox 识别，但未实现，当我将它输入开发人员工具时。 -ms-text-size-adjust 确实存在并记录在案 here。

【解决方案2】：

很难找到它，但是：它是 CSS 中的 -webkit-text-size-adjust 属性。

价值观：

百分比（默认大小），例如120%，或100%
auto（默认）
none - 如果 auto 不适用于您的页面。 但是，这通常会导致缩放问题。请改用100%。例如，在桌面上打开 Safari 并缩放页面（Command-Plus）——即使整个页面已经缩放，您的文本也不会被放大！不要使用none！

请注意，这些不仅可以应用于页面级别，还可以应用于元素/小部件/容器级别。

（我不会只为我的网站指定 100% 的值，除非我确定它已经针对小屏幕进行了优化，并且永远不会指定 none，因为它会导致问题。）

请注意，在 Firefox Mobile（例如，对于 Android 和 Firefox OS）中有一个类似的属性，-moz-text-size-adjust、documented here。感谢 Costa 指出这一点。

显然微软也有一个用于移动 IE 的版本：-ms-text-size-adjust。

更新，10 年后：This MDN page 可能最适合检查浏览器当前的兼容性以及该属性的供应商前缀。

【讨论】：

我从不提出打算自己回答的问题，但当且仅当我认为这是最好的答案时，我才会接受我自己的答案，尽可能多地向观众表明。如果您不喜欢那样，那么您可以弯曲。（在这种情况下，我搜索了 15 分钟，一无所获，问了这个问题，然后立即找到了正确的文档。谁在乎呢？最终的效果是我让好信息更容易找到。）
我一直在努力解决类似的问题。这个答案很有帮助。
我在使用仅在 Safari iOS 11 上（不在桌面版 Safari）上出现的 CSS“缩放”时遇到了一些奇怪的问题。将此属性设置为“自动”修复它。几乎就像 iOS 上的 Safari 在对元素应用缩放时更改了此属性。

【解决方案3】：

接受的答案有效，但在其他 webkit 浏览器中，它为正在缩放的人锁定 font-size。使用 100% 而不是 none 可以双向使用：

body {
    -webkit-text-size-adjust: 100%;
}

【讨论】：