在Safari（iPhone）上某些字体大小变大了

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

Joe的回复中包含一些最佳实践，但是我认为您所描述的问题主要是因为Mobile Safari如果认为文本会显示得太小会自动缩放文本。您可以使用CSS属性解决此问题-webkit-text-size-adjust。以下是仅将其应用于iPhone的示例：

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

使用100％而不是无。

normalize.css包括此

另外，请确保在视口meta标签中将初始缩放设置设为1：

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

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

结识单位

1. “ Ems”（em）：“ em”是Web文档媒体中使用的可伸缩单位。em等于当前字体大小，例如，如果文档的字体大小为12pt，则1em等于12pt。Ems本质上是可伸缩的，因此2em等于24pt，.5em等于6pt，依此类推。由于可伸缩性及其对移动设备的友好性，Ems在Web文档中变得越来越流行。
2. 像素（px）：像素是固定尺寸的单位，用于屏幕媒体（即在计算机屏幕上读取）。一像素等于计算机屏幕上的一个点（屏幕分辨率的最小划分）。许多Web设计人员在Web文档中使用像素单位，以便在网站在浏览器中呈现时生成其网站的像素完美表示。像素单元的一个问题是，对于视觉受损的阅读器，像素单元无法向上缩放，而无法适应移动设备。
3. 点数（pt）：传统上在打印介质（任何要在纸上打印的东西等）中使用点数。1点等于1/72英寸。点与像素非常相似，因为它们是固定大小的单位，无法缩放。
4. 百分比（％）：百分比单位与“ em”单位非常相似，除了一些基本差异。首先，当前字体大小等于100％（即12pt = 100％）。使用百分比单位时，您的文本对于移动设备和可访问性仍然可以完全扩展。

我有同样的问题，原来的CSS里有这行：

-webkit-text-size-adjust：120％;

我必须将其更改为100％，并且一切都很顺利。无需将所有px更改为em或%%。

还要检查一下是否没有为要处理的元素设置“宽度/高度”，Safari至少在svg，Chrome和FF中提供的字体大小优先于字体大小。