你的 CSS 重置可能需要 text-size-adjust

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费积分!

Kilian Valkhof:

[…] 当您将网站从纵向切换到横向时,移动 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 的文本输入进行缩放,所以也要注意这一点。

直接链接 →