修复 Mobile Safari (iPhone) 上文本呈现不一致且某些字体比其他字体大的字体大小问题？答案

【问题标题】：Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others?修复 Mobile Safari (iPhone) 上文本呈现不一致且某些字体比其他字体大的字体大小问题？
【发布时间】：2011-07-15 06:24:09
【问题描述】：

我们的网站在移动 Safari 上呈现的字体大小不一致——据我们所知，只有 Mobile Safari。这让我们非常难过。

我们用 Firebug 分析了网站，错误的区域继承了正确的样式，但字体仍然以错误的大小呈现。

1) 访问http://www.panabee.com。

2) 进行域名搜索。

左侧的方框显示不正确的字体大小。字体大小应与右侧的字体大小相匹配（框标题和框副本）。例如，标题“Variations”和“Twitter”远大于标题“Alternate Endings”。

有什么线索吗？

【问题讨论】：

那就不知道了。我已经删除了我的答案，因为这只是一个猜测。
相关：stackoverflow.com/questions/12463360/…
为子孙后代：现在是 2018 年，这篇文章仍然很有帮助。

标签： iphone css layout mobile mobile-safari

【解决方案1】：

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

理想情况下，您可以通过使用Responsive Web Design 技术来解决此问题，使您的设计适应移动屏幕尺寸（在这种情况下，您将不再有任何非常宽的块，因此移动浏览器将不再调整您的字体大小)。
如果这不是一个选项，并且您无法为移动用户提供桌面网站，那么看看您是否可以调整您的设计，使您的文本块都不比移动设备的设备宽度宽 (例如，许多纵向手机为 320 像素）（您可以使用特定于移动设备的 css 以避免影响桌面浏览器），然后 Mobile Safari 不需要增加任何字体大小（以及重排文本的浏览器，如 Android 浏览器和 Opera Mobile，也无需更改布局）。
最后，如果您真的需要阻止 Mobile Safari 调整字体大小，您可以设置 -webkit-text-size-adjust: 100%，但这样做只能作为最后的手段，因为这可能会导致移动用户难以阅读您的文本，因为它要么太小，要么他们必须在阅读每一行后左右平移。请注意，您必须使用100% 而不是none，因为none has nasty side-effects in desktop browsers。 Mobile Firefox 和 IE Mobile 也有等效的 -moz-text-size-adjust 和 -ms-text-size-adjust 属性。

编辑：例如，在您的情况下，最简单的可能是第二种选择，因此您可以尝试添加以下 CSS：

/* Mobile browsers only */
@media only screen and (max-device-width: 480px) {
    table#all_results {
        width: auto;
    }
    td#main_box {
        width: 320px;
    }
    td#side_box {
        width: 320px;
    }
}

虽然像这样硬编码 320px 并不理想；您可以通过使用各种 CSS 媒体查询或从 JavaScript 获取设备宽度来改进这一点。

【讨论】：

谢谢，@John。当您说“文本块”时，您指的是文本的父容器，还是实际的文本量？换句话说，对于像“Variations”和“Translations”这样只包含几个字符长的文本的部分标题，我需要将它们包装在另一个 DOM 元素中（例如，显示 inline-block 的 span）？
@Crashalot：文本块是指带有display:block 的元素，例如
标签。在您的情况下，您似乎可以将两个列都设为 320px 宽 - 请参阅我在上面的答案中添加的示例 CSS（这可能会被改进以更好地处理屏幕尺寸变化）。在可能的情况下，测试它在真实设备上的外观。不过，您可以进一步优化，例如拥有像 en.m.wikipedia.org/wiki/Mobile_Web 这样的可扩展部分，这样用户就不必滚动太多就可以找到他们感兴趣的部分。
请注意下面的实际解决方案。自从 @John 启发了最终解决方案后，我们就给他加分了。
@testing：文本自动调整大小仅影响比设备屏幕宽度（与密度无关的像素）更宽（以 CSS 像素为单位）的文本列。如果您使用响应式网页设计，您将拥有或等效项，这意味着您的页面永远不会比设备的屏幕宽，因此文本自动调整大小将不起作用，你不必担心它。（Android 版 Chrome 有一点警告 - crbug.com/252828 - 但即使这样通常也相对较小）。
关于响应式网页设计的探索：在我的探索过程中，有一些情况下，特定于设备宽度的响应式设计仍然崩溃，一些字体在 iPhone 上旋转时只是随机改变大小，尽管效果很好在 Safari 和 Chrome 的桌面上。这个 CSS 修复 ( -webkit-text-size-adjust: 100% ) 似乎是让开发人员/设计师真正实现响应式设计的关键。我尝试了奇怪的 JavaScript 修复，尽管，但这个 CSS 确实有效.

【解决方案2】：

以下是最终奏效的方法（仅在 iPhone 4 上测试过）：

/* Mobile browsers only */
@media only screen and (max-device-width: 480px) {      
        td#main_box { -webkit-text-size-adjust:100% }               
}

我们将答案授予约翰，因为他的解决方案是这个解决方案的基础。

可能不是最优雅的答案，但它有效。

【讨论】：

为了完整起见，这是整个声明：-webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; -ms-text-size-adjust:100%;

【解决方案3】：

-webkit-text-size-adjust: none; 将导致您无法放大移动设备。你应该改用100%。

【讨论】：

【解决方案4】：

-webkit-text-size-adjust:none;

可能会解决您的问题。

target-element { -webkit-text-size-adjust:80% }

仍会缩放，但会比 webkits 默认值小 80%。

【讨论】：

谢谢@Thomas。这还不够，因为它还会在用户放大和缩小时禁用字体大小调整，这是不可取的。目标是保持 Safari 基于缩放的大小调整，同时保持 CSS 定义的字体大小一致性。

【解决方案5】：

在我的例子中，我有一个 <p> 元素，我通过添加解决了这个问题：

width: fit-content;

给它。我也能够在 Safari 移动版上重现这一点。

【讨论】：

【解决方案6】：

我通过对 IOS 应用程序和 IOS Safari 浏览器使用 css hack 修复了字体大小问题。

@supports (-webkit-touch-callout: none) {
       //you can write your custom css for IOS safari browser.
     }

【讨论】：