Question

Mobile Safari默认调整部分文本，包括<h1>和<h2>元素。我搜索了SO，看看我怎么能阻止它，并找到这些问题：

请注意，所有这些的答案都是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中标题和段落之间的相对文本大小？

Answer 1

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

当'无'应用于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;
  }
}

这应该可以让你获得3GS（第一规则），iPhone 4（第二规则）和iPad（第三规则）的所有iPhone。当视口正好是768px宽时，第三条规则在理论上也应该与桌面Safari相匹配 - 但实际上似乎没有。

说实话，我不确定使用javascript检测移动版Safari并在文档正文中添加一个类来应用规则会更好。这样，当具有新显示器的设备出现时，您不需要改装新规则。

Answer 2

请暂停以考虑Mobile Safari可能希望调整文本大小的原因。移动Safari（如适用于Android的Chrome，移动版Firefox和IE移动版）会增加宽版块的字体大小，这样，如果您双击放大该块（适合块到屏幕宽度），文本将会是清晰可辨。如果您设置-webkit-text-size-adjust: 100%（或none），它将无法执行此操作，因此当用户双击放大宽块时，文本将非常小;如果用户捏缩放，用户将能够阅读它，但文本将比屏幕更宽，他们必须水平平移才能阅读每行文字！

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

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

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

3 个答案: