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

75

我们的网站在移动Safari上呈现的字体大小不一致-据我们所知，只有移动Safari。这非常困扰我们。

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

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

2）搜索域名。

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

有什么线索吗？

— Crashalot
source

那不知道我删除了答案，因为这只是一个猜测。

— 2011年

相关：stackoverflow.com/questions/12463360/...

— 蒂莫Huovinen

1

对于后代：这是2018年，这篇文章仍然有帮助。

— 卡特·帕佩

148

Mobile Safari（例如适用于Android的Chrome，Mobile Firefox和IE Mobile的Chrome）会（始终）增加宽块的字体大小，因此，如果您双击以放大该块（使块适合屏幕宽度），文字将清晰易读。如果设置-webkit-text-size-adjust: 100%（或none），它将无法执行此操作，因此，当用户双击以放大宽块时，文本将变得很小。用户只要捏一下就可以阅读，但是文本会比屏幕宽，并且必须水平平移才能阅读每一行文本！

理想情况下，您将使用响应式Web设计技术来解决此问题，以使您的设计适应移动屏幕的大小（在这种情况下，您将不再有任何非常宽的块，因此移动浏览器将不再调整字体大小）。
如果这不是一种选择，并且您打算为移动用户提供桌面网站，那么请查看是否可以调整设计，使您的文本块都不比移动设备的设备宽度宽（例如，许多纵向电话的宽度为320px））（您可以使用移动设备专用的CSS以避免影响桌面浏览器），然后Mobile Safari无需增加任何字体大小（并且重排文本的浏览器（例如Android浏览器和Opera Mobile）也不需要更改您的布局）。
最后，如果您确实需要阻止Mobile Safari调整字体大小，则可以设置-webkit-text-size-adjust: 100%，但这只能作为最后的选择，因为这可能会导致移动用户难以阅读您的文本，因为文本太小或太小。阅读完每一行后，他们将不得不左右摇摆。请注意，您必须使用100%not，none因为在桌面浏览器中，它们都不会产生讨厌的副作用。移动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获取设备宽度来改善这一点。

— 约翰·梅勒
source

谢谢，@约翰。当您说“文本块”时，是指文本的父容器还是实际的文本量？换句话说，对于诸如“ Variations”和“ Translations”之类的标题仅包含几个字符的文本，我是否需要将它们包装在另一个DOM元素中（例如，跨行显示inline-block）？

— Crashalot 2011年

@Crashalot：我指的是用文本块表示的元素display:block，如<p>标签。在您的情况下，您似乎只能将两列的宽度都设为320px-请参见我在上面的答案中添加的CSS示例（可以对它进行改进以更好地处理屏幕尺寸的变化）。尽可能测试它在真实设备上的外观。不过，您可以进一步优化，例如，具有可扩展的部分，例如en.m.wikipedia.org/wiki/Mobile_Web，因此用户不必滚动太多即可找到感兴趣的部分。

— John Mellor

请注意实际的解决方案如下。自从他启发了最终解决方案以来，我们向@John授予了积分。

— Crashalot 2012年

@John：如果我要使用响应式网页设计怎么办？那里的解决方案是什么？我想到的唯一选择是在块元素（p）上设置宽度。但比起我必须知道所有大小和方向...我只希望两个p元素具有相同的字体大小...

— 测试

1

@testing：“文本自动调整大小”仅影响比设备的屏幕宽度（与密度无关的像素）宽（以CSS像素为单位）的文本列。如果您使用自适应网页设计，则将具有<meta name =“ viewport” content =“ width = device-width”>或等效名称，这意味着您的页面永远不会比设备的屏幕宽，因此“文本自动调整大小”将无效，而且您不必担心。（Android版Chrome浏览器有一个小警告-crbug.com/252828-但即使这样通常也相对较小）。

— 约翰·梅勒

41

这是最终有效的方法（仅在iPhone 4 tho上进行了测试）：

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

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

可能不是最优雅的答案，但是它可以工作。

— Crashalot
source

3

为了完整-webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; -ms-text-size-adjust:100%;

— 起见

6

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

— 网络现实
source

3

-webkit-text-size-adjust:none;

可能会解决您的问题。

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

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

— 托马斯·马斯（Thomas Maas）
source

2

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

— Crashalot 2011年

1

就我而言，我有一个<p>元素，并通过添加以下内容解决了此问题：

width: fit-content;

给它。我也能够在Safari移动设备上重现此内容。

— 锡
source

0

我通过使用针对iOS应用程序和iOS野生动物园浏览器的CSS hack解决了字体大小问题。

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

— SantoshK
source