logo标签列表

在Safari浏览器（iPhone）上，某些字体大小显示得更大

csssafarimobile-safarifont-size
126

在Safari或iPhone上，是否有CSS或其他原因导致某些字体大小设置被忽略？ 在我的网站上，iPhone上的Safari会将一些font-size：13px的文本呈现为比font-size：15px的文本更大。 它可能不支持某些元素上的font-size吗？

5个回答
287

Joe的回答中提到了一些很好的最佳实践，但我认为你所描述的问题主要是因为Mobile Safari会自动缩放文本，如果它认为文本将呈现得太小。您可以通过CSS属性-webkit-text-size-adjust来解决这个问题。以下是一个示例，演示如何仅针对iPhone应用此属性：

@media screen and (max-device-width: 480px){
  body{
    -webkit-text-size-adjust: 100%;
  }
}
2
刚遇到了这个问题。这个小媒体屏幕的hack非常完美。我打算开始将它加入我的CSS起始文件中。 - Throttlehead
1
哇，太棒了！一直让我疯狂，甚至尝试使用jQuery更改类名和设置内联CSS之前才找到这个。救命稻草！ - Christoffer Bubach
2
请确保使用媒体查询。似乎这会使某些文本难以阅读：小心-webkit-text-size-adjust:none - Gemmu
1
帮了很多忙！谢谢啊兄弟 - Swathi
16
答案需要更新为“-webkit-text-size-adjust: 100%”，这样可以避免自动更新，但允许用户发起缩放。（来源） - Shawn Erquhart
显示剩余9条评论
19
14
此外，请确保在您的视口元标记中将初始缩放设置为1：
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
1

同时请检查您操作的元素是否没有设置“宽度/高度”，Safari在svg中会优先考虑大小而不是字体大小，而Chrome和FF似乎目前不会。

0
我曾经也遇到了同样的问题，后来发现在原始的 CSS 代码中有这样一行代码：
-webkit-text-size-adjust: 120%;
我将它改为了 100%，所有内容都变得顺畅了起来。不需要将所有像素转换为 em 或 %%。
设计师应该始终使用 em 作为字体大小单位。 - Nick Turner
2
除了在 body 标签的 CSS 中，使用 px 大小最好。 - Matt Parkins
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接