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

Question

我不是在谈论页面缩放，而是iOS上的MobileSafari自动增加某些字体大小的方式。

究竟在什么情况下会自动增加字体大小？是否可以防止或减少这种情况的发生？

- Alan H.

---

嗯...我也遇到了这个问题，但是我想知道，有没有一种好的方法来处理文本大小调整？它让我的按钮溢出，并且在我的输入字段中截断文本，这让我很烦恼。似乎它带来的负面影响比好处还多，但也许是我做错了什么。有人在使用它时取得了成功吗，而不是禁用它？ - Costa Michailidis

还有，这个规则适用于安卓版的Firefox吗？ - Costa Michailidis

@Costa，我不知道。两个问题：（1）是否有移动版Firefox模拟器？（2）MDN有任何有用的评论吗？不是一个问题：（3）我很想知道，所以当你弄清楚时，请务必在此处留下评论！谢谢！ - Alan H.

这是我能找到的最好的信息：https://developer.mozilla.org/zh-CN/docs/CSS/text-size-adjust。 - Costa Michailidis

我将视口设置为600像素，然后调整大小就停止了。我认为这里涉及到一些“可见性”的计算。无论如何，我正在逐步实现完全流体布局。我不认为有Firefox适用于Android的模拟器。在MDN上有很多有趣的东西，事实上我认为每个浏览器都有一些前缀的文本调整CSS规则。 - Costa Michailidis

Answer 1

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

确保您的所有文本在第一次呈现时都以易读的字号显示。请记住，iPhone和iPod touch屏幕相对较小。

- BoltClock

---

苹果公司的文档：http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-text-size-adjust - Alan H.

注意，这会完全阻止在Webkit浏览器（Safari，Chrome）中调整文本大小，因此缩放只会放大图像而不是文本。 - mk12

不要将此放在body中；如果你想为 iPhone 使用它，应该将其放在一个 320px 的设备宽度媒体查询中。 - mk12

还应考虑添加-moz-text-size-adjust和-ms-text-size-adjust（以及简单的text-size-adjust），与-webkit-text-size-adjust一起实现在更广泛的手机和其他设备上产生相同效果。 - C. Dragon 76

@Bob Rockefeller：当我在开发者工具中输入“-moz-text-size-adjust”时，Firefox似乎能够识别但未实现它。而“-ms-text-size-adjust”则确实存在并有文档记录此处。 - BoltClock

Answer 2

我遇到了很多跟踪的麻烦，但问题是CSS中的-webkit-text-size-adjust属性。

值：

• 百分比（相对于默认大小），例如120%或100%
• auto（默认值）
• none - 如果auto在您的页面上不起作用。然而，这通常会导致缩放问题。请改用100%。例如，在桌面上打开Safari并缩放页面（Command-Plus）时，尽管整个页面已缩放，但您的文本不会变大。请勿使用none！

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

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

---

请注意，在Firefox移动版（例如Android和Firefox OS）中，有一个类似的属性 -moz-text-size-adjust，可以在此处查看文档。感谢Costa指出这一点。

---

更新，十年后：此MDN页面可能是检查当前浏览器兼容性和供应商前缀的最佳方法。

- Alan H.

---

我提出问题时并不想回答它，但如果我认为自己的答案是最佳的，我会接受它，并向观众表明。如果你不喜欢这样做，那么就请离开。在这种情况下，我找了15分钟，什么都没有找到，问了这个问题，然后立即找到了正确的文档。谁在乎呢？最终效果是让有用的信息更容易被找到。 - Alan H.

我一直在努力解决类似的问题。这个答案帮了很大的忙。 - Rahul

我在使用CSS "zoom"时遇到了一些奇怪的问题，这只发生在Safari iOS 11上（而不是桌面版Safari）。将此属性设置为"auto"可以解决它。就好像在iOS上使用缩放时，Safari会更改此属性一样。 - Code Commander

Answer 3

接受的答案是可行的，但在其他webkit浏览器中，对于正在缩放的用户，它锁定了font-size。而使用100％而不是none则可以同时适用：

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

- dc-

---

嗯，为什么你的代码与被接受的答案（none）相同，而你却建议使用 100%？ - Alan H.

无论如何，我改变了接受的答案为我的，并强调了你的观点，我也注意到了。感谢你的提醒，dc-。 - Alan H.

@Alan H.：啊，我编辑了我的答案。自己接受的答案不会自动排在最前面，我宁愿不要一个高票但误导人的答案。 - BoltClock

糟糕！我没注意到。已经修复了！ - dc-

@BoltClock 您的意见是，考虑到您的更新、我评论中的附加信息以及我最终自己回答了问题，应该接受谁的答案？ - Alan H.

@Alan H.: 真的由你决定。就我个人而言，我更喜欢你的。 - BoltClock