用 rem + viewport 缩放控制最稳妥，但必须禁用 text-size-adjust，否则 iOS Safari 会强行放大小字号文本；根本原因是系统「可读性缩放」和浏览器对 viewport 解析差异，导致手机和平板文字表现不一致。
直接结论：用 rem + viewport 缩放控制最稳妥，但必须禁用 text-size-adjust，否则 iOS Safari 会强行放大小字号文本。
为什么手机和平板上文字大小表现不一致
根本原因不是屏幕尺寸，而是系统默认的「可读性缩放」和浏览器对 viewport 的解析差异。iOS 平板（尤其是 iPad）默认视口宽度更大，且 Safari 对小于 16px 的文本自动放大；Android 平板则更依赖 initial-scale 设置是否被用户干预过。
常见错误现象：font-size: 14px 在 iPhone 上显示像 18px，在 iPad 上却正常；或者横屏时文字突然变小。
- 移动端浏览器（尤其 Safari）会对
内小于 16px 的文本强制等比放大，与viewport的width和user-scalable设置强相关 - iPad OS 的「显示缩放」设置（大号字体模式）会全局影响
rem基准，但不会触发text-size-adjust的重排 -
安卓部分厂商浏览器（如华为、小米）会忽略
viewport的minimum-scale，导致 pinch-zoom 后文字失真
怎么用 rem 统一控制文字大小
核心是让根元素 font-size 动态适配设备宽度，同时规避系统干预。不要用媒体查询写死断点，改用 JS 或 CSS clamp。
立即学习“前端免费学习笔记（深入）”；
推荐做法（CSS 方案，兼容性好）：
html {
font-size: clamp(14px, 2.5vw, 18px);
}
p, li, button {
font-size: 0.875rem; /* = ~12–16px 实际渲染 */
}说明：
-
clamp(14px, 2.5vw, 18px)让根字号在窄屏（手机）下不低于 14px，宽屏（平板）下不超 18px，中间按视口宽度线性过渡 - 避免用
vw直接设正文font-size，否则横屏时文字过大（如font-size: 4vw在 iPad 横屏可能达 32px） - 如果必须用 JS 动态设置
document.documentElement.style.fontSize，记得监听resize和orientationchange，但 iOS 15+ 对 orientationchange 支持不稳定
必须加的 CSS 重置项
以下三行缺一不可，否则文字大小在不同设备上不可控：
html {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
}关键点：
-
text-size-adjust: 100%是标准属性，禁用浏览器对小字号的自动放大逻辑 -
-webkit-text-size-adjust必须写在html上，写在body或其他元素无效 - 某些安卓 WebView（如微信内置）仍会忽略该设置，此时需配合
font-size≥ 16px +line-height显式声明
调试时最容易忽略的两个细节
一是「系统级字体缩放」干扰：iOS「设置 → 显示与亮度 → 文字大小」开启「更大的动态类型」后，rem 计算不受影响，但 em 和百分比字号会被乘以系统系数；二是「viewport initial-scale=1」在 iPad 上实际等效于 initial-scale=0.8（因默认视口宽度为 768px），导致基于 vw 的计算偏大。
验证方法：打开 Safari 开发者工具，检查 html 元素的最终 font-size 值，而不是看 CSS 声明；真机测试时务必关闭「辅助功能 → 更大字体」开关再对比。
