最稳定方式是用js动态修改html元素的font-size并配合rem单位；禁用body.style.fontsize、zoom或transform:scale()，因其会破坏布局流和可访问性，且无法响应系统缩放设置。
用 document.body.style.fontSize 直接改根字号最简单
多数人想实现“点按钮放大/缩小文字”，其实不需要操作每个元素，只要改 body 的基础字号，配合 rem 单位就能全局响应。前提是你的 CSS 里用的是 rem（比如 font-size: 1.2rem;），而不是固定 px 或 em。
实操建议：
- 初始设置
body { font-size: 16px; }，这是浏览器默认基准，后续所有rem都基于它 - 按钮点击时，直接改
document.body.style.fontSize，例如设为"18px"或"14px" - 避免用
+=或-=拼字符串（如body.style.fontSize += "2px"），容易出错；最好存一个当前字号变量来控制 - 如果页面已有内联
style覆盖了body字号，得先清空或用!important（不推荐），优先用 CSS class 切换更稳妥
用 class 切换比直接改 style 更可靠
直接写 style.fontSize 容易被其他 JS 或 CSS 覆盖，尤其在框架或复杂样式表里。换成预定义 class，靠 classList.toggle() 控制，稳定性高得多。
实操建议：
- CSS 中定义几个 class：
.text-large { font-size: 18px; }、.text-small { font-size: 14px; } - JS 里用
document.body.classList.remove("text-large", "text-small");先清旧状态，再add()新 class - 如果要支持三级缩放（小/标准/大），别用
toggle()，改用replace()或显式add()/remove() - 注意：改
body字号后，1rem会跟着变，但em是相对父元素的，可能不一致——所以务必统一用rem
用户偏好保存到 localStorage 避免刷新丢失
用户调大字体后刷新页面又回到默认，体验很差。把当前字号存在 localStorage，加载时读取并应用，是基本要求。
实操建议：
- 设置字号后立刻存：
localStorage.setItem("textSize", "18px"); - 页面加载时检查：
const saved = localStorage.getItem("textSize"); if (saved) document.body.style.fontSize = saved; - 不要存 “大/中/小” 这类字符串，直接存带单位的值（如
"18px"），省去映射逻辑 - 如果用了 class 方案，就存 class 名（如
"text-large"），然后body.className = saved或classList.add(saved) - 记得监听
storage事件，方便多标签页同步（不过多数场景可忽略）
移动端要注意 viewport 缩放干扰
在 iOS Safari 上，单纯改 font-size 有时会被系统“自动缩放”覆盖，尤其当文本过小触发可读性调整时。这不是 JS 错，是浏览器行为。
实操建议：
-
meta标签里确保没有禁用缩放：<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">（user-scalable=yes必须保留） - 避免把字体设得太小（如
10px），iOS 会强制放大，导致 JS 设置失效 - 测试真机，模拟器不一定复现；Safari 开发者工具里勾选 “Disable font boosting” 可临时关闭干扰（仅调试用）
- 如果必须兼容老安卓 WebView，加一行
* { -webkit-text-size-adjust: 100%; }防止自动缩放
真正麻烦的不是怎么写这三行 JS，而是字体变化后行高、间距、容器高度全跟着动——得提前在布局里留余量，否则文字一放大就撑破卡片或换行错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
