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

Question

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

我尝试了多种方法来解释它，但很难找到原因。

我怀疑它与我很久以前的一些CSS有关：-webkit-text-size-adjust: 100%;删除和更改这个值对差异没有影响，所以这是一个转移注意力的事情。

什么会导致这两个应用程序上同一网站和 CSS 的渲染之间存在差异？

Answer 1

这里有两个潜在的原因，当然还有更多，但这些是我发现并解决了我的问题。

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

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

据我所知，iOS 版 Chrome 中没有设置可以禁用与Text Size的这种链接。

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

很高兴知道这两个信息，以防您像我一样每天使用文本大小控件，或者您的用户或客户也这样做！

Safari 在“设置”应用程序中有一个“页面缩放”设置

另一方面，Safari 有一个名为“页面缩放”的设置，范围从 50% 到 300%。它位于Safari > 网站设置 > 页面缩放下的“设置”应用程序中。

此设置可能会导致尺寸为 200% 的 CSS 布局完全混乱。

不管怎样，如果两个应用程序之间存在差异，这个页面缩放设置也值得检查。