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

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

理想情况下，您可以通过使用响应式网页设计技术来解决此问题，使您的设计适应移动屏幕尺寸（在这种情况下，您将不再有任何非常宽的块，因此移动浏览器将不再调整您的字体大小）。如果这不是一个选项，并且您被困在为移动用户提供桌面网站，那么看看您是否可以调整您的设计，使您的文本块都不比移动设备的设备宽度更宽（例如，对于许多纵向手机来说是 320 像素） ) （您可以使用特定于移动设备的 css 来避免影响桌面浏览器），然后 Mobile Safari 不需要增加任何字体大小（以及重排文本的浏览器，如 Android 浏览器和 Opera Mobile，也不需要更改你的布局）。最后，如果您确实需要阻止 Mobile Safari 调整您的字体大小，您可以设置 -webkit-text-size-adjust: 100%，但这只能作为最后的手段，因为它可能会导致移动用户难以阅读您的文本，因为它要么太小，要么他们必须在他们阅读的每一行之后从一侧平移到另一侧。请注意，您必须使用 100% 而不是 none，因为 none 在桌面浏览器中具有令人讨厌的副作用。 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 获取设备宽度来改进这一点。

以下是最终奏效的方法（仅在 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: none; 将导致您无法放大移动设备。您应该改用 100%。

-webkit-text-size-adjust:none;

可能会解决你的问题。

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

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

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

width: fit-content;

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

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

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