HTML页面在微信环境下的字体缩放锁定与UI结构适配-html教程-PHP中文网

微信字体乱放大是因ios和android采用不同机制：ios需用-webkit-text-size-adjust:100% !important锁死，android需调用weixinjsbridge重置字号，且viewport必须含width=device-width，小字号需用transform或vw规避系统限制。

html页面在微信环境下的字体缩放锁定与ui结构适配

微信里字体乱放大，不是bug，是它故意的——iOS和Android走两套机制，只锁CSS或只跑JS，必有一边崩。

iOS微信必须用`-webkit-text-size-adjust:100% !important`锁死渲染

iOS微信（包括Safari）不改HTML结构，只偷偷放大文字，靠的就是WebView对-webkit-text-size-adjust的主动干预。设成100%比none更稳，旧版iOS上none可能被忽略。

必须加!important，否则第三方UI库或内联样式容易覆盖
规则得作用在body或根容器上，写在某个div里无效
建议同时补全标准属性：text-size-adjust: 100% !important和-moz-text-size-adjust: 100% !important，兼容性更牢
这个CSS只管“缩放”，不管“基准字号”——如果你用rem且根font-size动态计算，还得配合JS重设根值

Android微信必须用`WeixinJSBridge.invoke('setFontSizeCallback', {fontSize: 0})`重置

Android微信根本不读CSS，它通过WeixinJSBridge强行注入字号。你不调用，它就按用户设置渲染；你调了，它才尊重你的默认值。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

不能只在页面加载时调一次，必须监听menu:setfont事件，在用户点右上角“调整字体”时再触发重置
WeixinJSBridge不是全局立刻可用，得用document.addEventListener('WeixinJSBridgeReady', ...)或attachEvent兜底
{fontSize: 0}代表恢复系统默认字号，不是设为0px；传16之类具体值反而不可靠
部分机型有1秒左右延迟，可考虑加loading过渡，避免闪动

viewport配置错误会让`-webkit-text-size-adjust`失效

即使写了正确的CSS，如果<meta name="viewport">里漏了width=device-width，或者误加了maximum-scale，iOS微信可能直接忽略-webkit-text-size-adjust。

必须包含width=device-width，这是触发响应式和缩放控制的前提
避免出现maximum-scale=1.0或user-scalable=no，它们会干扰字体缩放锁定逻辑
不要混用initial-scale和maximum-scale，尤其当initial-scale不是1时，容易引发iOS渲染异常

小字号（如12px以下）仍会突破限制，得用`transform: scale()`或`vw`绕过

iOS系统强制最小渲染字号为12px，哪怕CSS写了font-size: 10px，最终也可能被拉到12px。这不是微信的问题，是WebKit底层行为。

对超小文字（比如标签、辅助说明），改用transform: scale(0.833)模拟10px（10/12≈0.833），并配transform-origin: left top防偏移
或用font-size: 2.5vw这类视口单位，确保在主流设备上稳定落在10–12px区间
注意vw方案需搭配min-font-size（如有）或媒体查询兜底，避免大屏下文字过大

最易被忽略的是：iOS和Android的适配逻辑完全独立，缺一不可；而viewport配置和小字号处理属于隐藏关卡，表面正常，一上线就露馅。