为什么在iOS Chrome和iOS Safari上字体大小不同？

Question

我正在开发一个响应式网站，当我在我的 iPhone（iOS 13，2020 年 6 月）上检查它时，我发现 Safari 和 Chrome 浏览器的字体大小不同。

我尝试了几种方法来解决这个问题，但是很难找到原因。

我怀疑它与我很久以前使用的某些 CSS 相关：-webkit-text-size-adjust: 100%; 删除和更改此值对差异没有影响，所以它只是一个错误引导。

是什么导致这两个应用程序呈现相同网站和 CSS 时出现差异？

- jerclarke

Answer 1

以下有两个可能的原因，当然还有更多的原因，但是这两个是我找到并解决问题的。

Chrome遵循系统范围内的“文本大小”

如果您在控制中心使用“文本大小”滑块或相关的系统级设置，则Chrome会自动更改网站的文本！

据我所知，在iOS上，Chrome没有禁用与“文本大小”之间的链接的设置。

因此，如果您想使Safari和Chrome匹配，请确保您的手机的字体大小状态处于标记为“默认”的中间位置。

无论您是像我一样每天使用文本大小控件，还是您的用户或客户使用，都要知道这些内容！

Safari在设置应用中具有“页面缩放”设置

另一方面，Safari有一个称为页面缩放的设置，从50％到300％。它在设置应用程序下的Safari ＞网站设置＞页面缩放中找到。

这个设置在大小为200％等尺寸的CSS布局上可能会导致混乱。

无论哪种情况，如果两个应用程序之间存在差异，则值得检查此页面缩放设置。

- jerclarke

---

关于“据我所知，在Chrome for iOS中没有设置来禁用与文本大小的链接”，您可以在CSS中控制它。 Markus D.上面的答案向我展示了如何操作。我在我的应用程序全局CSS中添加了一行代码，现在所有浏览器都显示相同的字体大小：html * { -webkit-text-size-adjust: none; }。您可以尝试一下，如果它对您有用，那么您可能需要编辑您的答案以帮助指引其他人找到同样的解决方法。请注意，“html * { -webkit-text-size-adjust: 100％; }”适用于iOS Chrome / Safari，但不适用于Firefox。“html * { -webkit-text-size-adjust: none; }”适用于所有浏览器。 - Justin Grant

无论是 -webkit-text-size-adjust: 100%; 还是 -webkit-text-size-adjust: none; 都对我不起作用。iOS 13.7 - user2991837

Answer 2

感谢您指引我正确的方向 - 我一直在苦苦思索为什么iPhone SE上的Chrome渲染文本比Safari更大！

我似乎没有“默认”文本大小设置（设置>显示和亮度>文本大小）。

然而，-webkit-text-size-adjust: 100% 对我有效 - 至少对于我一直在苦苦挣扎的Chrome浏览器是这样。

- Marcus D.

Answer 3

在iOS 13中，Safari向最终用户公开了媒体字体大小。这意味着在您的根页面（html标签）中，css“字体大小”规则被覆盖，由用户强制执行且无法更改。

而Chrome for Safari并不像Android那样使用渲染引擎“Blink”，它使用的是Safari WebKit渲染引擎，因此，Chrome for iOS就是“Safari”。

无论如何，您可以通过调整媒体查询以使用“em”单位而不是“px”来适应这种情况，换句话说：

1. 将Bootstrap（如果使用）断点更改为“em”，而不是默认像素。 2. 使您的组件边框、填充和其他内容基于像素。

另一种方法是在用户需要调整字体大小之前了解用户需求并做出反应：

1. 基于视口调整字体大小（CSS Clamp） 2. 使用响应式布局 3. 使用CSS border-box、box-shadow等

另一种方法是重新计算所有内容，成本很高：

如果用户更改了根元素的字体大小会发生什么？

- Tito Moi

Answer 4

我在iOS14、13上遇到了一個奇怪的問題，段落被放大了，以下方法對Safari和Chrome有效：

-webkit-text-size-adjust: none;

我希望它也能帮助到其他人。

- Denise Ignatova