移动端页面字体在微信被放大_禁用自动调整_rem适配_字体大小设置
微信内置浏览器（X5内核）有字体自动放大功能，页面字体小于阈值时自动放大，导致布局错乱。解决方法分CSS禁用、viewport配置、rem适配三种。
CSS禁用字体自动调整： 在页面CSS加： ``` html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } ``` 这行CSS告诉WebKit浏览器（包括微信X5）不要自动调整文字大小。加在全局样式里。部分旧版X5需要`!important`： ``` -webkit-text-size-adjust: 100% !important; ```
viewport配置： 页面head必须有： ``` ``` `width=device-width`让页面宽度等于设备宽度。没有viewport的页面，微信按PC宽度渲染再缩放，字体显示异常。
微信系统字体放大： 用户在微信→我→设置→通用→字体大小里调大了字体，微信会强制放大网页文字。这是系统级设置，CSS的text-size-adjust管不了。 - 解决方案：用rem单位，根元素font-size动态计算，微信放大字体时rem等比缩放，布局自适应。 - JS设置根字体大小： ``` document.documentElement.style.fontSize = window.innerWidth / 10 + 'px'; ``` 页面所有尺寸用rem（1rem=根font-size），微信放大时整体等比缩放，不溢出。
避免过小字体： 微信触发自动放大的阈值通常是12px以下。正文字体设14-16px，微信就不会放大。设计时不要用10px、11px小字。最小字体12px，正文14-16px，标题18-24px。
容器用相对单位： 固定高度容器+字体放大=文字溢出。用min-height代替height，padding/margin用em或rem，容器随字体自适应。 ``` .content { min-height: 100px; /* 不用height */ padding: 1rem; /* 相对单位 */ font-size: 16px; line-height: 1.6; } ```
JS监听微信字体变化： 微信提供WeixinJSBridge接口，可以监听字体设置变化： ``` document.addEventListener('WeixinJSBridgeReady', function() { WeixinJSBridge.invoke('getFontScale', {}, function(res) { // res.fontScale 是字体缩放比例 // 根据比例调整布局 }); }, false); ``` 实际用得少，rem适配更简单通用。
测试方法： 1. 微信里打开页面，微信设置→通用→字体大小调到最大，看页面是否错乱。 2. iOS和安卓微信都测（X5内核版本不同）。 3. 小屏手机（如iPhone SE）和大屏手机都测。 4. 错乱的地方：文字溢出→容器改min-height；布局错位→用rem；字体被放大→加text-size-adjust。
iOS Safari也有类似问题： iOS Safari默认对小于16px的文本在缩放时放大。同样用text-size-adjust:100%解决，或表单元素字体设16px以上（iOS聚焦输入框时不自动缩放）。
其他移动端浏览器： Chrome、Safari、QQ浏览器、UC浏览器都有字体调整功能。text-size-adjust:100%对大部分浏览器有效。系统级字体放大（如安卓设置里的字体大小）影响所有应用，rem适配是根本解决方案。
最佳实践： - 加text-size-adjust:100% - 正确配置viewport - 用rem做单位，JS动态计算根字体 - 正文字体14-16px，不用过小字体 - 容器用min-height和相对单位 - 多机型多浏览器测试
更新时间：2026-08-26 17:30:57