如何让rem单位适配iOS Safari系统文本大小且不影响macOS Safari（无需系统检测）

直接使用以下CSS代码即可实现需求，无需依赖系统检测：

html {
  font: -apple-system-body;
  font-size: 100%;
}

原理说明 #

• -apple-system-body 会触发iOS Safari的系统文本大小适配逻辑，让rem单位跟随系统“文本大小”设置同步缩放，解决iOS下rem不响应系统字体调整的问题。
• 在macOS Safari中，-apple-system-body会将默认字体大小设为13px，但font-size: 100%会让html元素继承浏览器默认的字体大小（通常为16px），抵消前者的副作用，保持rem基准与其他桌面浏览器一致。

效果验证 #

• iOS Safari：调整系统“文本大小”后，所有使用rem单位的元素会同步缩放，符合无障碍设计要求。
• macOS Safari：rem基准维持默认的16px，文本大小与常规表现一致，不会出现缩小问题。

补充提示 #

该方案完全基于CSS级联特性实现，不需要任何JavaScript系统检测逻辑，规避了苹果生态下设备/系统检测的兼容性风险，同时完美满足无障碍适配需求。

内容的提问来源于stack exchange，提问作者jamesplease