某些字体大小在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

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

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

Answer 3

Use 100% instead of None.

normalize.css包含此

Answer 4

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

满足单位

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

Answer 5

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

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

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

Answer 6

同时检查你是否有宽度/高度＆＃34;设置为您正在操作的元素，Safari在svg＆s中优先考虑字体大小，Chrome和FF似乎至少目前没有。