Question

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

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

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

2）搜索域名。

左侧的框显示不正确的字体大小。字体大小应与右侧的字体大小相匹配（框标题和框复制）。例如，标题“变体”和“推特”比标题“备用结尾”大得多。

有什么线索？

Answer 1

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

理想情况下，您可以使用Responsive Web Design技术来解决此问题，使您的设计适应移动屏幕尺寸（在这种情况下，您将不再拥有任何非常宽的块，因此移动浏览器将不再调整您的字体大小）。
如果这不是一个选项，并且您无法向移动用户提供桌面网站服务，那么看看您是否可以调整您的设计，这样您的文本块就不会比移动设备的设备宽度更宽（例如320px用于许多肖像手机）（您可以使用特定于移动设备的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获取设备宽度来改进它。

Answer 2

这是最终起作用的（仅在iPhone 4上测试过）：

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

我们给了约翰答案，因为他的解决方案是这个问题的基础。

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

Answer 3

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

Answer 4

-webkit-text-size-adjust:none;

可能会解决您的问题。

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

仍然可以缩放，但保持比webkits默认值小80％。

Answer 5

对于我来说，我有一个<p>元素，我通过添加以下内容解决了这个问题：

width: fit-content;

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

Answer 6

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

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

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

6 个答案: