请帮助我了解移动 Safari 的文本大小调整答案

【问题标题】：Please help me understand mobile Safari's text resizing请帮助我了解移动 Safari 的文本大小调整
【发布时间】：2011-07-15 22:57:23
【问题描述】：

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的博文：

这样做是为了防止基于 WebKit 的浏览器调整文本大小。甚至整页缩放都不会调整文本大小。现在，如何防止用户调整文本大小是个好主意？

根据 Apple 的 Safari CSS Reference (JavaScript required)，-webkit-text-size-adjust “指定在 iOS 上的 Safari 中显示文本内容的大小调整”。

当给定值“none”时，文档指定“未调整文本大小”。

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

（我目前处于无法验证这一点的位置，但我会假设他和其他提出索赔的人是正确的。）

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

【问题讨论】：

news.ycombinator.com/item?id=1902432 这是首选解决方案吗？

标签： css webkit mobile-safari

【解决方案1】：

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

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

但是，当这条规则应用于桌面 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;
  }
}

这将使您的所有 iPhone 都达到 3GS（第一条规则）、iPhone 4（第二条规则）和 iPad（第三条规则）。当视口正好是 768 像素宽时，第三条规则理论上也应该与桌面 Safari 匹配 - 但实际上似乎并不匹配。

老实说，我不确定使用 javascript 检测移动 Safari 并在文档正文中添加一个类以应用规则是否会更好。这样一来，当配备新显示器的设备问世时，您就无需重新制定新规则。

【讨论】：

可靠的答案。感谢您的努力。
那个 css 似乎对我不起作用。我用@media only screen and (max-device-width: 480px), only screen and (device-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) { body {-webkit-text-size-adjust:none;} }
你能更具体地说明什么不起作用吗？一个示例 URL 将非常有帮助，并了解您正在测试的设备......
@Beejamin SASS/Compass 不喜欢你的语法，但是 zerotool 的逻辑似乎有点不同（尽管似乎仍然有效？）。
@zerotool - 我已经更正了这个例子；括号有问题。

【解决方案2】：

请停下来考虑一下为什么 Mobile Safari 可能要调整您的文本大小。 Mobile Safari（如 Android 版 Chrome、Mobile Firefox 和 IE Mobile）会增加宽块的字体大小，这样如果您双击放大该块（使块适合屏幕宽度），文本将是易读。如果您设置-webkit-text-size-adjust: 100%（或none），它将无法做到这一点，因此当用户双击放大宽块时，文本将难以辨认；用户可以通过捏拉放大来阅读它，但是文本会比屏幕宽，并且他们必须水平平移才能阅读每一行文本！

我在an earlier answer 中列出了解决此问题的可能方法。

【讨论】：

自从@Beejamin 提出建议以来，我一直在使用他的解决方案，但我会考虑移动特定的 CSS。我的内容是 388 像素宽（略高于您提到的 320 像素阈值），并且在捏缩放时清晰可见。特定于移动设备的 CSS 的存在是为了满足 320 像素的“标准”，而不是为了让我的网站更具可读性，这使得它看起来是多余的。无论哪种方式，标题都不应呈现小于段落文本。我认为这违反了最小惊讶原则。

【解决方案3】：

似乎接受的答案中有括号错误，导致这在横向模式下不起作用。

这是一个更正的版本：

@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;}
}

【讨论】：