Safari (iPhone) 上的某些字体大小变大了

Question

是否有 CSS 或其他原因导致 Safari/iPhone 会忽略某些字体大小设置？在我的特定网站上，iPhone 上的 Safari 呈现一些字体大小：13 像素的文本大于字体大小：15 像素的文本。它可能不支持某些元素的字体大小吗？

Answer 1

Joe 的回复中有一些很好的最佳实践，但我认为您描述的问题集中在这样一个事实，即如果 Mobile Safari 认为文本呈现得太小，它会自动缩放文本。您可以使用 CSS 属性

-webkit-text-size-adjust

来解决这个问题。以下是如何将此应用到您的身体的示例，仅适用于 iPhone：

@media screen and (max-device-width: 480px){
  body{
    -webkit-text-size-adjust: 100%;
  }
}

Answer 2

使用 100% 而不是无。

normalize.css 包括这个

Answer 3

此外，请确保在视口元标记中将初始缩放设置设置为 1：

<meta name="viewport" content="width=device-width; initial-scale=1.0;" />

Answer 4

还要检查你是否没有为你正在操作的元素设置“宽度/高度”，Safari 在 svg 中给予大小优先于字体大小，Chrome 和 FF 似乎至少目前没有。

Answer 5

我有同样的问题，原来在原来的CSS中有这样一行：

-webkit-text-size-adjust: 120%;

我不得不把它改成100%，一切都很顺利。无需将所有 px 更改为 em 或 %%.