[…] 当您将网站从纵向切换到横向时,移动 Safari 会增加默认字体大小。在手机上是这样,在 iPad 上则不会。Safari 很久以前就开始这样做,作为一种提高未针对移动设备优化的网站的可读性的方法。虽然在几乎没有任何网站针对移动设备进行优化的时代,这无疑是有用的,但现在它的帮助作用要小得多。[…] 文本大小在一个特定情况下随机增加,正是您希望使用 CSS 重置来防止发生的事情。
这正是 text-size-adjust
的作用。 MDN
当包含文本的元素使用屏幕的 100% 宽度时,算法会增加其文本大小,但不会修改布局。
text-size-adjust
属性允许网页作者禁用或修改此行为,因为针对小屏幕设计的网页不需要此行为。
您可以在 Apple 自身的文档 中看到他们是如何做到的(在 iPhone 上)。有一个 古老的错误 会导致这会阻止缩放,但现在可能不是什么大问题了。
Kilian 的建议
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
Firefox 甚至不支持它,所以我可能会去掉那个供应商前缀,但除此之外,我表示赞同。我想我可以处理我自己的文本大小。
让我想起了 移动 Safari 如何对小于 16px
的文本输入进行缩放,所以也要注意这一点。
看起来这在 sanitize.css 中。
text-size-adjust: none
会对可访问性产生影响。请改用text-size-adjust: 100%
。参见 https://www.456bereastreet.com/archive/201011/beware_of_-webkit-text-size-adjustnone/ 和 https://www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
我认为这两篇文章中提出的 text-size-adjust 问题在一段时间前就已修复。
参见 https://bugs.webkit.org/show_bug.cgi?id=56543
“Firefox 甚至不支持它,所以我可能会去掉那个供应商前缀,但除此之外,我表示赞同。”
根据 Can I Use (https://caniuse.cn/?search=text-size-adjust),Firefox Android 支持 text-size-adjust,并使用 -moz- 前缀。