移动端页面字体在微信被放大_微信浏览器字体调整_viewport设置_解决方法
移动端页面在微信里字体被放大，是因为微信内置浏览器（X5内核）有字体自动调整功能，当页面字体小于一定值时，微信会自动放大以提升可读性。这个功能对用户友好，但会破坏设计师的排版，导致布局错乱、文字溢出。解决方法是禁用微信的字体自动调整或优化页面适配。
CSS方法禁用字体自动调整。在页面的CSS里加： ``` body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } ``` 这行CSS告诉浏览器不要自动调整文字大小。加上后微信就不会放大字体了。注意要加在body或html上，对整个页面生效。部分旧版微信X5内核可能需要加`!important`：`-webkit-text-size-adjust: 100% !important;`。
viewport设置正确。页面head里必须有： ``` ``` `width=device-width`让页面宽度等于设备宽度，`initial-scale=1.0`初始缩放1倍。没有viewport标签，移动端会按PC宽度渲染再缩放，字体显示异常。微信对没有viewport的页面更容易触发字体放大。
微信的"字体大小"设置也会影响。用户在微信→我→设置→通用→字体大小里调大了字体，微信会强制放大网页文字。这种情况CSS的text-size-adjust管不了，因为是系统级的字体放大。可以用JS监听微信字体变化，动态调整页面布局。或者在页面设计时预留足够空间，字体放大后不溢出。
JS检测微信字体并适配。微信提供了`WeixinJSBridge`接口，可以监听字体变化： ``` document.addEventListener('WeixinJSBridgeReady', function() { WeixinJSBridge.invoke('getNetworkType', {}, function(e) { // 字体变化时重新计算布局 }); }, false); ``` 更实用的方法是用rem单位，根元素font-size根据屏幕宽度动态计算，微信放大字体时rem也会变，布局自适应。设置html的font-size用JS计算：`document.documentElement.style.fontSize = window.innerWidth / 10 + 'px'`，页面所有尺寸用rem，字体放大时整体等比缩放。
避免使用过小字体。微信触发自动放大的阈值通常是12px以下。正文字体设14px以上，微信就不会放大。设计时不要为了排版用10px、11px的小字，移动端本来就难读。最小字体12px，正文14-16px，标题18-24px。
行高和容器高度用相对单位。如果容器固定高度，字体放大后文字溢出。用min-height代替height，或者用em/rem做单位，容器随字体大小自适应。padding和margin也用相对单位，布局更有弹性。
测试方法：微信里打开页面，在微信设置里把字体调到最大，看页面是否错乱。错乱的地方用上面的方法修复。iOS和安卓微信表现可能不同，两个系统都要测。修复后在多种屏幕尺寸（小屏手机、大屏手机）测试，确保都正常。
更新时间：2026-08-26 18:01:25