css - 请帮助我了解移动版 Safari 的文本大小调整

Question

Mobile Safari 默认会调整一些文本的大小，包括 <h1> 和 <h2> 元素。我搜索了 SO 以了解如何防止这种情况发生，并发现了诸如此类的问题:

Font size issue with iPhone

Preventing iPhone scaling when rotated

font size change after orientation screen change to horizontal

请注意，所有这些问题的答案都是 CSS 属性:

-webkit-text-size-adjust:none;

这对于在移动版 Safari 上保持标题和段落元素之间的相对文本大小非常有用。然而，我偶然发现了一篇标题为 Beware of -webkit-text-size-adjust:none 的博文:

What that does is prevent WebKit-based browsers from resizing text. Not even full page zoom resizes the text. Now, how can preventing your users from resizing text be a good idea?

According to Apple’s Safari CSS Reference (JavaScript required), -webkit-text-size-adjust "Specifies a size adjustment for displaying text content in Safari on iOS".

When given a value of “none”, the documentation specifies that "The text size is not adjusted".

现在，我把属性描述的意思是不会自动调整相对文字大小，不是说文字大小不能由用户调整，而是作者说他的测试表明，当指定值“none”时，文本确实无法在基于 WebKit 的浏览器中进行调整。

(我目前处于完全无法验证这一点的位置，但我将假设他和其他提出 claim 的人是正确的。)

所以我的问题是:如何在不牺牲可访问性的情况下控制移动版 Safari 中标题和段落之间的相对文本大小？

Answer 1

据我所知，这里的关键问题是何时单独应用此规则 - 因为当值为“无”时它适用于任何 webkit 浏览器，无论是桌面、手机大小，或平板电脑。据我所知，桌面 webkit 浏览器不应用任何其他值(-webkit-font-size-adjust:150%；什么都不做)。

当“无”应用于 iOS 上的 Mobile Safari 或任何移动 Webkit 浏览器(Android 等)时，您会得到“正确”效果的感觉:浏览器不会尝试调整字体大小您的一些元素和您(设计师)仍然可以控制它们相对于彼此的大小。 您仍然可以捏合/缩放和双击缩放来放大/缩小视口(viewport)。移动浏览器进行视口(viewport)缩放，而不是文本缩放。

但是，当此规则应用于桌面 webkit(Safari、Chrome)时，感觉不对，因为桌面 webkit 确实会进行文本缩放，而此规则可防止这种情况发生。

因此 - 解决方案是针对此规则仅针对移动 webkit。 CSS 媒体查询是对此的合乎逻辑的答案，但设法针对所有 iOS 设备有点笨拙且不精确:

@media screen and (max-device-width: 480px), 
       screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (device-width: 768px) {
  body {
    -webkit-text-size-adjust:none;
  }
}

这应该让您获得 3GS(第 1 条规则)、iPhone 4(第 2 条规则)和 iPad(第 3 条规则)以下的所有 iPhone。第三条规则在理论上也应该与桌面 Safari 相匹配，当视口(viewport)恰好是 768 像素宽时——但在实践中似乎并不如此。

老实说，我不确定使用 javascript 来检测移动版 Safari 并在文档正文中添加一个类来应用规则会不会更好。这样一来，当带有新显示屏的设备问世时，您就不需要修改新规则。