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

Question

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

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

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

2) 搜索域名。

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

有什么线索吗？

Answer 1

Mobile Safari(如 Chrome for Android、Mobile Firefox 和 IE Mobile)会增加宽 block 的字体大小(始终)，这样如果您双击放大该 block (适合该 block 到屏幕宽度)，文本将清晰可辨。如果您设置 -webkit-text-size-adjust: 100%(或 none)，它将无法执行此操作，因此当用户双点击以放大宽 block ，文本将小得难以辨认；如果用户双指放大，他们将能够阅读它，但是文本会比屏幕宽，他们必须水平平移才能阅读每一行文本!

1. 理想情况下，您可以使用 Responsive Web Design 来解决这个问题使您的设计适应移动屏幕尺寸的技术(在这种情况下，您将不再有任何非常宽的 block ，因此移动浏览器将不再调整您的字体大小)。

2. 如果这不是一个选项，并且您一直在为移动用户提供桌面网站，那么看看您是否可以调整您的设计，使您的文本 block 都不宽于移动设备的设备宽度 (例如，对于许多纵向手机为 320px)(您可以使用特定于手机的 css 以避免影响桌面浏览器)，然后 Mobile Safari 将不需要增加任何字体大小(以及重排文本的浏览器，如 Android 浏览器和 Opera Mobile，也不需要更改您的布局)。

3. 最后，如果您真的需要阻止 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 获取设备宽度来改进这一点。