CSS 某些字体大小在 Safari (iPhone) 上呈现得更大
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3226001/
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
Some font-size's rendered larger on Safari (iPhone)
提问by Alex
Are there CSS or other reasons why Safari/iPhone would ignore some font-size settings? On my particular website Safari on the iPhone renders some font-size:13px text larger than font-size:15px text. Does it maybe not support font-size on some elements?
是否有 CSS 或其他原因导致 Safari/iPhone 会忽略某些字体大小设置？在我的特定网站上，iPhone 上的 Safari 渲染一些 font-size:13px 文本大于 font-size:15px 文本。它可能不支持某些元素的字体大小吗？
回答by David Kaneda
Joe's response has some good best practices in it, but I think the problem you're describing centers around the fact that Mobile Safari automatically scales text if it thinks the text will render too small. You can get around this with the CSS property -webkit-text-size-adjust. Here's a sample of how to apply this to your body, just for the iPhone:
Joe 的回答中有一些很好的最佳实践，但我认为您所描述的问题主要围绕这样一个事实：如果 Mobile Safari 认为文本会呈现太小，它会自动缩放文本。您可以使用 CSS 属性来解决这个问题-webkit-text-size-adjust。以下是如何将其应用于您的身体的示例，仅适用于 iPhone：
@media screen and (max-device-width: 480px){
body{
-webkit-text-size-adjust: none;
}
}
回答by user3276706
回答by johnpolacek
Also, make sure you are setting the initial zoom setting to 1 in your viewport meta tag:
另外，请确保在视口元标记中将初始缩放设置设置为 1：
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
回答by johnpolacek
I don't use pixel definitions anymore as they are really confusing and aren't exactly the same across visual services.
我不再使用像素定义，因为它们确实令人困惑，并且在视觉服务中并不完全相同。
Meet the Units
认识单位
- “Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
- Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen's resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.
- Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
- Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.
- “Ems”（em）：“em”是一个可扩展的单位，用于网络文档媒体。一个em等于当前的font-size，比如文档的font-size是12pt，1em就等于12pt。Ems 本质上是可扩展的，因此 2em 等于 24pt，0.5em 等于 6pt，等等。由于可扩展性和它们对移动设备友好的性质，Ems 在 Web 文档中越来越受欢迎。
- 像素（px）：像素是固定大小的单位，用于屏幕媒体（即要在计算机屏幕上读取）。一个像素等于计算机屏幕上的一个点（屏幕分辨率的最小划分）。许多网页设计师在网页文档中使用像素单位，以便在浏览器中呈现其网站时生成像素完美的表示。像素单元的一个问题是它不能向上缩放以适应视障读者或向下缩放以适应移动设备。
- 点 (pt)：点传统上用于印刷媒体（任何要打印在纸上的东西等）。一点等于 1/72 英寸。点很像像素，因为它们是固定大小的单位，不能按大小缩放。
- 百分比 (%)：百分比单位很像“em”单位，除了一些基本的区别。首先，当前字体大小等于 100%（即 12pt = 100%）。在使用百分比单位时，您的文本对于移动设备和可访问性保持完全可扩展。
回答by me1974
I had the same problem, turns out in the original CSS there was this line:
我遇到了同样的问题，原来在原来的 CSS 中有这样一行：
-webkit-text-size-adjust: 120%;
-webkit-text-size-adjust: 120%;
I had to change it to 100%, and everything was smooth. No need to change all px to em or %%.
我不得不将其更改为 100%，一切都很顺利。无需将所有 px 更改为 em 或 %%。
回答by marebuffi
Also check if you don't have a "width/height" set to the elements you're manipulating, Safari gives sizing precedence over font size in svg's, Chrome and FF don't, it seems, currently at least.
还要检查您是否没有为您正在操作的元素设置“宽度/高度”，Safari 在 svg 中优先于字体大小，Chrome 和 FF 似乎至少目前没有。
