根本原因是js直接写死html.style.fontsize会覆盖系统文本缩放，绕过可访问性链路；应改用css的clamp()控制根字号，如html{font-size:clamp(14px,2.5vw,16px)}，让浏览器在其基础上叠加系统缩放。
rem根字号动态调整时，为什么屏幕阅读器缩放失效
根本原因在于：用 JavaScript 直接写死 html.style.fontSize 会覆盖浏览器对系统文本缩放的响应。比如用户在 macOS 辅助功能里把文本设为“更大”，或 Windows 设置了 125% 缩放，此时 rem 基准本该被放大，但 JS 覆盖后强制还原为计算值，等于绕过了可访问性链路。
真正有效的做法是只用 CSS 控制根字号：
-
html { font-size: clamp(14px, 2.5vw, 16px); }—— 浏览器会在此基础上叠加系统缩放比例 - 避免在 JS 中执行
document.documentElement.style.fontSize = '16px'这类硬赋值 - 若必须用 JS 动态适配（如兼容老安卓 WebView），需先读取
window.devicePixelRatio和matchMedia('(min-resolution: 2dppx)')，再谨慎叠加缩放系数
clamp() 里 min/max 值设多少才算安全
最小值不能低于 14px：iOS Safari 对 4vw 可能冲到 24px+，正文行距崩坏、按钮文字溢出。
典型错误是写成 clamp(12px, 4vw, 24px)：
- 12px 在 iPhone SE（320px 宽）下算出来是 12.8px，但系统可能抬到 16px，导致和设计稿偏差大
- 24px 在 iPad Pro 横屏（2048px）下对应 81.92px，远超阅读舒适区
- 推荐组合：
clamp(14px, 3.2vw, 18px)或clamp(14px, 2.8vw, 16px)，兼顾小屏可读与大屏克制
text-size-adjust: 100% 到底要不要加
要加，且必须加在 html 或 body 上。iOS Safari 默认会对小字号（尤其 clamp()，它也可能在渲染阶段二次干预，造成字体跳变或布局抖动。
正确写法：
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
注意点：
- 这个声明不解决系统级缩放，只禁用 iOS 的自动干预
- 不能只加在某个
p或div上，必须作用于根或全局容器 - 现代 Chrome / Firefox 已默认禁用该行为，但 iOS Safari（截至 2026 年 7 月）仍需显式关闭
打印场景下动态字号为何全乱套
因为 @media print 不触发 resize 事件，JS 动态改的 font-size 在打印预览里不会重算；而 CSS 的 clamp() 在打印时视口宽度按纸张尺寸（如 A4 宽 210mm ≈ 827px）计算，4vw 就变成 33px，标题直接撑满一页。
解决方案很实际：
- 在
@media print里重置根字号：html { font-size: 16px !important; } - 所有正文用
rem，标题用固定px或em避免被打印视口干扰 - 不要依赖 JS 控制打印字号——它在打印上下文里基本不可靠
最易被忽略的是：很多人测试时只看浏览器缩放，却没开打印预览检查字号是否回归基础值。一打印才发现标题比正文还小，或者段落挤成一团——那基本就是没隔离打印上下文的字号逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
