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

我不是说要放大页面，而是指iOS上的MobileSafari有时会自动放大一些字体大小

确切地说，这是什么时候完成的？这是可以预防的还是可以阻止的

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

---

首先要确保你所有的文字都清晰可辨。iPhone和iPodtouch的屏幕相当小，所以也要记住这一点。

在追踪它时遇到了很多麻烦，但是：这是CSS中的

-webkit text size adjust

属性

价值观：

• 百分比（默认大小），例如

  120%

  或

  100%

• auto

  （默认值）

• none

  –如果

  auto

  不适用于您的页面但是，这通常会导致缩放问题。使用

  100%

  。例如，在桌面上打开Safari并缩放页面（Command Plus）–即使整个页面已缩放，文本也不会被放大不要使用

  none

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

（我不会只为我的网站指定

100%

的值，除非我非常确定它已经针对小屏幕进行了优化，而且永远不会

none

，因为它会导致问题。）

---

请注意，在Firefox Mobile（例如Android和Firefox操作系统）中有一个类似的属性，

-moz text size adjust

。感谢科斯塔指出这一点

---

---

显然，微软也有一个针对移动IE的版本：

-ms text size adjust

公认的答案是可行的，但在其他webkit浏览器中，它会锁定缩放用户的

字体大小。使用
100%
而不是“无”在两方面都有效：

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

我从来没有问过一个自己想回答的问题，但只要我认为这是最好的一个，就一定要接受我自己的答案。如果你不喜欢那样，那么你可能会弯曲。（在这种情况下，我搜索了15分钟，什么也没找到，问了这个问题，然后立即找到了正确的文档。谁在乎呢？最终的结果是我让好的信息更容易找到。）我一直在努力解决类似的问题。这个答案帮助很大。我在使用CSS“zoom”时遇到了一些奇怪的问题，这些问题只出现在Safari iOS 11上（而不是Safari for desktop上）。将此属性设置为“自动”修复了它。这几乎就像iOS上的Safari在对元素应用缩放时更改了此属性。苹果的文档：注意，这会阻止webkit浏览器（Safari、Chrome）中的文本大小调整，因此缩放只会放大图像而不会放大文本。千万不要将其放在
正文中
；它应该在一个3px设备宽度媒体查询，如果你想为iPhone。还考虑添加- MOZ文本大小调整和-MS文本大小调整（以及简单的文本大小调整）除了-webkit text size adjust之外，它还可以在更广泛的手机和其他设备上实现相同的效果。@Bob Rockefeller:
-moz text size adjust
在我将其输入开发者工具时，Firefox似乎可以识别，但没有实现
-ms text size adjust
确实存在并且有文档记录。呃，为什么您的代码与您建议的
100%
时的公认答案相同（
none
）无论如何，将公认答案更改为我自己的答案并强调了您的观点，我也注意到了这一点。谢谢你的提醒，dc-。@Alan H:呸，我编辑了我的答案。被接受的自我回答不会自动上升到顶部，我也不希望有一个投票率高但误导性强的答案！我没注意。它是固定的@在你看来，考虑到你的最新情况，我评论中的附加信息，以及我最终的自我回答——谁的答案应该被接受？嗯。。。我也有这个问题，但我想知道，有没有一个好方法来调整文本大小？我很恼火，因为这会导致我的按钮溢出，并切断输入字段中的文本。看起来它弊大于利，但也许我做错了什么。有人发现使用它比禁用它更成功吗？还有，有针对Android的Firefox规则吗？@Costa我不知道。两个问题：（1）是否有移动Firefox模拟器？（2） MDN有什么有用的意见吗？毫无疑问：（3）我很想知道，所以当你弄明白的时候，一定要在这里留下评论！谢谢给你：到目前为止我能找到的最好的信息。我将我的视口设置为600px，然后停止调整大小。我认为“可见性”的计算正在进行中。无论如何，我正在慢慢地朝着一个完全流畅的布局努力。我不认为有针对Android sim卡的Firefox。MDN上有很多有趣的东西，事实上，我认为每个浏览器都有一个前缀文本大小调整或文本调整css规则。