CSS 修复 Mobile Safari (iPhone) 上文本呈现不一致且某些字体比其他字体大的字体大小问题？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5303263/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others?
提问by Crashalot
Our site renders with inconsistent font sizes on mobile Safari -- and as far as we can tell, only Mobile Safari. This very much has stumped us.
我们的网站在移动版 Safari 上呈现的字体大小不一致——据我们所知，只有移动版 Safari。这让我们非常困惑。
We analyzed the site with Firebug, and the incorrect areas are inheriting the right styles, yet the fonts are still rendered with the wrong sizes.
我们用 Firebug 分析了网站，错误的区域继承了正确的样式，但字体仍然以错误的大小呈现。
1) Visit http://www.panabee.com.
1) 访问http://www.panabee.com。
2) Conduct a search for a domain name.
2) 进行域名搜索。
The boxes on the left side show the incorrect font sizes. The font size should match the font size on the right side (both box titles and box copy). For instance, the titles, "Variations" and "Twitter," are much larger than the title, "Alternate Endings."
左侧的框显示不正确的字体大小。字体大小应与右侧的字体大小（框标题和框副本）相匹配。例如，标题“Variations”和“Twitter”比标题“Alternate Endings”大得多。
Any clue why?
任何线索为什么？
回答by John Mellor
Mobile Safari (like Chrome for Android, Mobile Firefox and IE Mobile) increases the font size of wide blocks (at all times), such that if you double-tap to zoom in on that block (which fits the block to the screen width), the text will be legible. If you set -webkit-text-size-adjust: 100%(or none), it won't be able to do this, and so when a user double-taps to zoom in on wide blocks the text will be illegibly small; users will be able to read it if they pinch-zoom in, but then the text will be wider than the screen and they'll have to pan horizontally to read each line of text!
Mobile Safari（如 Android 版 Chrome、Mobile Firefox 和 IE Mobile）会增加宽块的字体大小（在任何时候），这样，如果您双击以放大该块（使该块适合屏幕宽度） ，文本将是清晰的。如果您设置-webkit-text-size-adjust: 100%(或none)，它将无法执行此操作，因此当用户双击以放大宽块时，文本将变得难以辨认；用户可以通过双指缩放来阅读它，但是文本将比屏幕宽，他们必须水平平移才能阅读每一行文本！
Ideally you would fix this by using Responsive Web Designtechniques to make your design adapt to mobile screen sizes (in which case you would no longer have any very wide blocks, so mobile browsers would no longer adjust your font sizes).
If that's not an option, and you're stuck serving a desktop site to mobile users, then see if you can tweak your design so none of your blocks of text are wider than the mobile device's device-width (e.g. 320px for many portrait phones) (you can use mobile-specific css to avoid affecting desktop browsers), then Mobile Safari won't need to increase any font sizes (and browsers which reflow text, like the Android Browser and Opera Mobile, also won't need to change your layout).
Finally if you reallyneed to prevent Mobile Safari from adjusting your font sizes you can set
-webkit-text-size-adjust: 100%, but do this only as a last resortsince it is likely to cause mobile users to have difficulty reading your text, as it'll either be too small or they'll have to pan from side to side after every line they read. Note that you must use100%notnonebecause none has nasty side-effects in desktop browsers. There are also equivalent-moz-text-size-adjustand-ms-text-size-adjustproperties for Mobile Firefox and IE Mobile.
理想情况下，您可以通过使用响应式网页设计技术使您的设计适应移动屏幕大小来解决此问题（在这种情况下，您将不再有任何非常宽的块，因此移动浏览器将不再调整您的字体大小）。
如果这不是一个选项，并且您坚持为移动用户提供桌面网站，那么看看您是否可以调整您的设计，使您的文本块都不会比移动设备的设备宽度（例如，许多纵向手机为 320 像素） )（您可以使用特定于移动设备的 css 来避免影响桌面浏览器），那么 Mobile Safari 将不需要增加任何字体大小（以及重排文本的浏览器，如 Android 浏览器和 Opera Mobile，也不需要更改您的布局）。
最后，如果您真的需要阻止 Mobile Safari 调整您可以设置的字体大小
-webkit-text-size-adjust: 100%，但仅作为最后的手段这样做，因为它可能会导致移动用户难以阅读您的文本，因为它要么太小，要么他们必须在阅读完每一行后左右平移。请注意，您必须使用100%notnone因为在桌面浏览器中没有任何令人讨厌的副作用。Mobile Firefox 和 IE Mobile也有等价物-moz-text-size-adjust和-ms-text-size-adjust属性。
Edit: for example in your case the simplest is probably the 2nd alternative, so you could try adding the following CSS:
编辑：例如在您的情况下，最简单的可能是第二种选择，因此您可以尝试添加以下 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;
}
}
Though it's not ideal to hardcode 320px like this; you could improve on that by using a variety of CSS media queries, or getting the device-width from JavaScript.
虽然像这样硬编码 320px 并不理想；您可以通过使用各种 CSS 媒体查询或从 JavaScript 获取设备宽度来改进它。
回答by Crashalot
Here's what ultimately worked (tested only on iPhone 4 tho):
这是最终有效的方法（仅在 iPhone 4 上测试过）：
/* Mobile browsers only */
@media only screen and (max-device-width: 480px) {
td#main_box { -webkit-text-size-adjust:100% }
}
We awarded the answer to John since his solution was the basis of this one.
我们将答案授予约翰，因为他的解决方案是此解决方案的基础。
Probably not the most elegant answer, but it works.
可能不是最优雅的答案，但它有效。
回答by Webreality
-webkit-text-size-adjust: none;will cause you to not be able to zoom in mobile devices. You should use 100%instead.
-webkit-text-size-adjust: none;将导致您无法放大移动设备。你应该100%改用。
回答by Thomas Maas
-webkit-text-size-adjust:none;
will probably solve your problem.
可能会解决你的问题。
target-element { -webkit-text-size-adjust:80% }
will still zoom but keeps it 80% smaller than webkits default.
仍然会缩放，但保持它比 webkits 默认值小 80%。
回答by cSn
In my case I had a <p>element and I solved this issue by adding:
就我而言，我有一个<p>元素，我通过添加以下内容解决了这个问题：
width: fit-content;
width: fit-content;
To it. I was able to reproduce this on Safari mobile as well.
给它。我也能够在 Safari 移动设备上重现这一点。
