为什么 iOS Chrome 与 iOS Safari 上的字体大小不同？
Why is font-size different on iOS Chrome v. iOS Safari?
我正在开发一个响应式网站，当我在 iPhone 上查看它时（iOS 13，2020 年 6 月）我发现 Safari 和 [=26= 之间的字体大小不同].
我尝试了几种方法来解释它，但找不到原因。
我怀疑它与我很久以前的一些 CSS 有关：-webkit-text-size-adjust: 100%; 删除和更改此值对差异没有影响，所以它是一个红色鲱鱼。
什么会导致同一网站的呈现与这两个应用程序 CSS 之间的差异？
这里有两个潜在的原因，肯定还有更多，但这些是我发现并解决了我的问题。
Chrome 遵守系统范围的“文本大小”
如果您使用控制中心的“文本大小”滑块，或系统级别的相关设置，Chrome 会自动更改网站的文本！
据我所知，Chrome 中没有设置 iOS 来禁用与 文本大小 的链接。
因此，如果您希望 Safari 和 Chrome 匹配，请确保您的 phone 的 Font Size 状态处于标记的中间位置作为“默认”。
如果您像我一样日常使用 文本大小 控件，或者您的用户或客户使用
Safari 在“设置”应用中有一个“页面缩放”设置
另一方面，Safari 有一个名为 页面缩放 的设置，从 50% 到 300%。它位于 设置 应用程序的 Safari > 网站设置 > 页面缩放.
下
此设置可能会导致 CSS 布局在 200% 这样的尺寸下完全混乱。
无论如何，如果两个应用程序之间存在差异，这个 页面缩放 设置也值得一试。
感谢您为我指明了正确的方向 - 我一直在解决为什么 Chrome 在我的 iPhone SE 上渲染的文本比 Safari 大的问题！
我似乎没有 文字大小 的“默认”设置（设置 > 显示和亮度 > 文字大小） .
然而，-webkit-text-size-adjust: 100% 确实对我有用 - 至少对 Chrome 是我苦苦挣扎的地方。
在iOS13中，Safari将media font-size暴露给最终用户，这意味着在你的根页面（html标签）中css"font-size " 规则被用户强制覆盖，无法更改。
并且 Chrome 对于 Safari 没有像 Android 使用渲染引擎“Blink”，它使用 Safari webKit 渲染引擎，所以 Chrome 对于 iOS 是“野生动物园”
无论如何，您可以对此做出反应，调整您的媒体查询以使用“em”单位而不是“px”，换句话说：
- 将bootstrap（如果使用）断点更改为“em”而不是默认像素。
- 使您的组件边框、填充和其他内容基于像素。
另一种方法是在需要调整字体大小之前了解用户的需求并做出反应：
- 根据视口调整字体大小（css 钳制）
- 使用响应式布局
- 使用css border-box, box-shadow...
另一种方法是重新计算所有内容，但代价很大：
我正在开发一个响应式网站，当我在 iPhone 上查看它时（iOS 13，2020 年 6 月）我发现 Safari 和 [=26= 之间的字体大小不同].
我尝试了几种方法来解释它，但找不到原因。
我怀疑它与我很久以前的一些 CSS 有关：-webkit-text-size-adjust: 100%; 删除和更改此值对差异没有影响，所以它是一个红色鲱鱼。
什么会导致同一网站的呈现与这两个应用程序 CSS 之间的差异？
这里有两个潜在的原因，肯定还有更多，但这些是我发现并解决了我的问题。
Chrome 遵守系统范围的“文本大小”
如果您使用控制中心的“文本大小”滑块，或系统级别的相关设置，Chrome 会自动更改网站的文本！
据我所知，Chrome 中没有设置 iOS 来禁用与 文本大小 的链接。
因此，如果您希望 Safari 和 Chrome 匹配，请确保您的 phone 的 Font Size 状态处于标记的中间位置作为“默认”。
如果您像我一样日常使用 文本大小 控件，或者您的用户或客户使用
Safari 在“设置”应用中有一个“页面缩放”设置
另一方面，Safari 有一个名为 页面缩放 的设置，从 50% 到 300%。它位于 设置 应用程序的 Safari > 网站设置 > 页面缩放.
下此设置可能会导致 CSS 布局在 200% 这样的尺寸下完全混乱。
无论如何，如果两个应用程序之间存在差异，这个 页面缩放 设置也值得一试。
感谢您为我指明了正确的方向 - 我一直在解决为什么 Chrome 在我的 iPhone SE 上渲染的文本比 Safari 大的问题！
我似乎没有 文字大小 的“默认”设置（设置 > 显示和亮度 > 文字大小） .
然而，-webkit-text-size-adjust: 100% 确实对我有用 - 至少对 Chrome 是我苦苦挣扎的地方。
在iOS13中，Safari将media font-size暴露给最终用户，这意味着在你的根页面（html标签）中css"font-size " 规则被用户强制覆盖，无法更改。
并且 Chrome 对于 Safari 没有像 Android 使用渲染引擎“Blink”，它使用 Safari webKit 渲染引擎，所以 Chrome 对于 iOS 是“野生动物园”
无论如何，您可以对此做出反应，调整您的媒体查询以使用“em”单位而不是“px”，换句话说：
- 将bootstrap（如果使用）断点更改为“em”而不是默认像素。
- 使您的组件边框、填充和其他内容基于像素。
另一种方法是在需要调整字体大小之前了解用户的需求并做出反应：
- 根据视口调整字体大小（css 钳制）
- 使用响应式布局
- 使用css border-box, box-shadow...
另一种方法是重新计算所有内容，但代价很大：