用 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 方案，兼容性好）：
