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

我们的网站在mobile Safari上呈现的字体大小不一致——据我们所知，只有mobile Safari。这让我们非常困惑

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

1） 访问

2） 进行域名搜索

左侧的框显示不正确的字体大小。字体大小应与右侧的字体大小相匹配（包括方框标题和方框副本）。例如，标题“变体”和“推特”比标题“交替结尾”大得多

有什么线索吗

-webkit-text-size-adjust:none;

可能会解决你的问题

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

仍将进行缩放，但会使其比webkits默认值小80%。

Mobile Safari（如Android的Chrome、Mobile Firefox和IE Mobile）会增加宽块的字体大小（在任何时候），因此，如果双击以放大该块（使块适合屏幕宽度），文本将清晰可见。如果您设置

-webkit text size adjust:100%

（或

none

），则无法执行此操作，因此当用户双击以放大宽块时，文本将小得难以辨认；如果用户按下放大按钮，他们将能够阅读，但是文本将比屏幕更宽，他们必须水平平移才能阅读每一行文本

理想情况下，您可以通过使用技术使您的设计适应移动屏幕大小来解决这个问题（在这种情况下，您将不再具有任何非常宽的块，因此移动浏览器将不再调整您的字体大小）

如果这不是一个选项，并且你一直在为移动用户提供桌面站点服务，那么看看你是否可以调整你的设计，使你的文本块都不超过移动设备的设备宽度（例如，许多肖像手机的文本块宽度为320px）（你可以使用特定于移动设备的css来避免影响桌面浏览器），这样，Mobile Safari就不需要增加任何字体大小（而回流文本的浏览器，如Android浏览器和Opera Mobile，也不需要更改布局）

最后，如果您确实需要阻止Mobile Safari调整字体大小，您可以设置

-webkit text size adjust:100%

，但这只能作为最后手段，因为这可能会导致移动用户难以阅读您的文本，因为它要么太小，要么在他们读完每一行之后，他们必须从一边平移到另一边。请注意，您必须使用

100%

not

none

，因为。对于移动Firefox和IE Mobile，也有相应的

-moz文本大小调整

和

-ms文本大小调整

属性

编辑：例如，在您的情况下，最简单的可能是第二种选择，因此您可以尝试添加以下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获取设备宽度来改进这一点。

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

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

---

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

-webkit文本大小调整：无将导致您无法放大移动设备。您应该改用
100%
。
在我的例子中，我有一个
元素，我通过添加以下内容解决了这个问题：

宽度：适合内容

去吧。我也能在Safari mobile上重现这一点。
我通过使用IOS应用程序和IOS Safari浏览器的css hack修复了字体大小问题

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

那就不知道了。我删除了我的答案，因为这只是一个猜测。相关：对于子孙后代：现在是2018年，这篇文章仍然很有用。谢谢，@Thomas。这还不够，因为当用户放大和缩小字体时，它也会禁用字体的大小调整，这是不可取的。目标是保留Safari基于缩放的大小调整，同时保留CSS定义的字体大小一致性。谢谢，@John。当你说“文本块”时，你指的是文本的父容器，还是文本的实际数量？换句话说，对于“变体”和“翻译”这样只包含几个字符长的文本的部分标题，我需要将它们包装在另一个DOM元素中（例如，显示内联块的span）？@Crashalot：所谓文本块，我指的是带有
display:block
，如标记的元素。在您的情况下，您似乎可以将两列的宽度都设置为320px——请参阅我在上面的回答中添加的示例CSS（这可能会得到改进，以便更好地处理屏幕大小的变化）。在可能的情况下，测试它在真实设备上的外观。您可以进一步优化，例如，有可扩展的部分，这样用户就不必滚动太多就可以找到他们感兴趣的部分。请注意，实际解决方案如下。自从@John提出最终解决方案以来，我们给了他分数。@测试：文本自动大小调整只会影响比设备屏幕宽度（与密度无关的像素）更宽的文本列（以CSS像素为单位）。如果你使用的是响应性网页设计，你将拥有或等同于此，这意味着你的页面将永远不会比设备的屏幕更宽，因此文本自动调整大小将没有效果，你也不必担心。（对于Android，Chrome有一个小小的警告——但即使是这样，通常也应该相对次要）。关于对响应性网页设计的追求：在我的探索过程中，有一些情况下，特定于设备宽度的响应性设计仍然出现问题，一些字体在iPhone上旋转时只是随机改变大小，尽管Safari和Chrome在桌面上工作得非常完美。这个CSS补丁（-webkit文本大小调整：100%）似乎是允许开发人员/设计师真正实现响应性设计的关键。我试过了
@supports (-webkit-touch-callout: none) {
       //you can write your custom css for IOS safari browser.
     }