某些字体大小在Safari(iPhone)上呈现得更大

Question

有没有CSS或其他原因,为什么Safari/iPhone会忽略某些字体大小设置？在我的特定网站上,iPhone上的Safari渲染了一些字体大小:13px文本大于font-size:15px文本.是否可能不支持某些元素的字体大小？

Answer 1

Joe的回答中有一些很好的最佳实践,但我认为你所描述的问题主要在于Mobile Safari如果认为文本渲染得太小就会自动缩放文本.你可以使用CSS属性解决这个问题-webkit-text-size-adjust.以下是如何将此应用于您的身体的示例,仅适用于iPhone:

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

Answer 2

使用100%而不是无.

normalize.css包括这个

Answer 3

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

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

Answer 4

我不再使用像素定义,因为它们确实令人困惑,并且在视觉服务中并不完全相同.

与单位见面

1. "Ems"(em):"em"是一个可扩展的单元,用于Web文档媒体.em等于当前的字体大小,例如,如果文档的字体大小为12pt,则1em等于12pt.Ems本质上是可扩展的,因此2em等于24pt,.5em等于6pt等.由于可扩展性和移动设备友好性,Ems在Web文档中变得越来越流行.
2. 像素(px):像素是固定大小的单位,用于屏幕媒体(即在计算机屏幕上阅读).一个像素等于计算机屏幕上的一个点(屏幕分辨率的最小分度).许多网页设计师在网络文档中使用像素单元,以便在浏览器中呈现网站时生成像素完美的网站表示.像素单元的一个问题是它不会向视觉受损的阅读器向上扩展或向下扩展以适应移动设备.
3. 点数(pt):传统上在打印介质中使用的点(任何要在纸上打印的东西等).一点等于1/72英寸.点与像素非常相似,因为它们是固定大小的单位,不能缩放.
4. 百分比(%):百分比单位与"em"单位非常相似,除了一些基本差异.首先,当前的字体大小等于100%(即12pt = 100%).使用百分比单位时,您的文本仍可完全扩展到移动设备和可访问性.