【发布时间】：2011-03-14 15:36:53
【问题描述】：
Safari/iPhone 是否有 CSS 或其他原因会忽略某些字体大小设置？在我的特定网站上，iPhone 上的 Safari 呈现一些 font-size:13px 文本大于 font-size:15px 文本。它可能不支持某些元素的字体大小吗？
【问题讨论】：
标签： css safari mobile-safari font-size
【发布时间】：2011-03-14 15:36:53
【问题描述】：
我不再使用像素定义，因为它们确实令人困惑，并且在视觉服务中并不完全相同。
认识单位
- “Ems” (em)：“em”是用于 Web 文档媒体的可扩展单元。一个 em 等于当前的 font-size，例如，如果文档的 font-size 为 12pt，则 1em 等于 12pt。 Em 本质上是可扩展的，因此 2em 等于 24pt，0.5em 等于 6pt，等等。由于可扩展性和对移动设备友好的特性，Em 在 Web 文档中变得越来越流行。
- 像素 (px)：像素是用于屏幕媒体（即在计算机屏幕上读取）的固定大小单位。一个像素等于计算机屏幕上的一个点（屏幕分辨率的最小单位）。许多网页设计师在网页文档中使用像素单位，以便在浏览器中呈现其网站时生成像素完美的表示。像素单元的一个问题是它不能向上缩放以供视障读者使用，也不能向下缩放以适应移动设备。
- 点 (pt)：点传统上用于印刷媒体（要在纸上印刷的任何东西等）。一点等于 1/72 英寸。点很像像素，因为它们是固定大小的单位，不能按大小缩放。
- 百分比 (%)：百分比单位与“em”单位非常相似，只是存在一些基本差异。首先，当前字体大小等于 100%（即 12pt = 100%）。使用百分比单位时，您的文本仍可完全适应移动设备和可访问性。
【讨论】：
-
答案是对文本使用 1 个预定义单位（即 12pt），然后对所有后续 css 定义使用 font-size:90%;或字体大小：110%；等等等等。这对于您所有支持的设备来说都更容易访问。
-
您忘记了最重要的：REM（参考 EM）。您可以在整个文档中使用它并且它保持不变（它不是级联的）。
-
这个答案不相关，也不以任何方式回答问题。问题是关于相同大小的文本呈现不同，而不是关于使用什么单位。无论使用什么单位，问题都确实存在。
Joe 的回复中有一些很好的最佳实践，但我认为您所描述的问题围绕着这样一个事实，即如果 Mobile Safari 认为文本将呈现太小，它会自动缩放文本。您可以使用 CSS 属性 -webkit-text-size-adjust 来解决这个问题。以下是如何将其应用于您的身体的示例，仅适用于 iPhone：
@media screen and (max-device-width: 480px){
body{
-webkit-text-size-adjust: none;
}
}
【讨论】：
-
刚刚遇到这个问题。这个小媒体屏幕黑客完美无缺。我将开始将它合并到我的 CSS 起始文件中。
-
哇，病了！一直让我发疯，我什至尝试在找到这个之前更改类名并将 css 设置为与 jQuery 内联。救命稻草！
-
帮助很大。干杯:)
-
确保使用媒体查询。似乎这会使某些文本难以阅读：Beware of -webkit-text-size-adjust:none
-
答案应该更新为
-webkit-text-size-adjust: 100%- 这样可以避免自动更新，但允许用户启动缩放。 (source)
我遇到了同样的问题，原来在原始 CSS 中有这样一行：
-webkit-text-size-adjust: 120%;
我不得不将其更改为 100%，一切都很顺利。无需将所有 px 更改为 em 或 %%。
【讨论】：
-
设计师无论如何都应该使用 em 作为字体大小。
-
...除了 body 标签 css 中像素大小最好的地方。
另外，请确保您在视口元标记中将初始缩放设置设置为 1：
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
【讨论】：
【讨论】：
还要检查您是否没有为您正在操作的元素设置“宽度/高度”，Safari 的大小优先于 svg 中的字体大小，Chrome 和 FF 似乎至少目前没有。
【讨论】：