HTML页面在微信内置浏览器中的字体缩放锁定实战-html教程-PHP中文网

微信字体缩放需iOS和Android双端协同解决：iOS用html, body{-webkit-text-size-adjust:100%!important;text-size-adjust:100%;-moz-text-size-adjust:100%}；Android通过WeixinJSBridge监听menu:setfont并调用setFontSizeCallback({fontSize:0})；input等表单控件需强制font-size≥16px!important；viewport meta仅控整体缩放，无法抑制字体缩放。

html页面在微信内置浏览器中的字体缩放锁定实战

微信内置浏览器会强制缩放页面字体，导致 rem 布局错乱、按钮错位、输入框变形——这不是 CSS 写错了，而是微信在你不知情时动了根字号基准。直接锁死是唯一靠谱做法，分 iOS 和 Android 两路走，缺一不可。

iOS 端必须加的 CSS 属性

iOS 微信通过 -webkit-text-size-adjust 动态放大文本，它会无视你写的 font-size: 14px，直接拉高整个渲染层的字体缩放比例。只写 body { -webkit-text-size-adjust: 100% } 不够，容易被后续样式覆盖或继承链干扰。

必须加上 !important，否则某些组件库（比如 vant、cube-ui）的局部样式可能把它干掉
要同时声明标准属性 text-size-adjust: 100% 和火狐兼容属性 -moz-text-size-adjust: 100%，不然 Firefox for iOS 或旧版 Safari 可能失效
作用域不能只写 body，得用 html, body 或通配符 * ，防止第三方弹窗、iframe 里漏掉

Android 端靠 WeixinJSBridge 调用 setFontSizeCallback

安卓微信不认 CSS 锁定，它走的是 WebView 级别的 setTextZoom()，必须调用原生桥接接口才能重置。关键不是“执行一次”，而是“监听并拦截所有后续调整”。

WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize': 0}) 中的 0 表示“恢复系统默认字号”，不是设成 0px
必须绑定 WeixinJSBridge.on('menu:setfont', ...)，否则用户从微信右上角「Aa」菜单手动调大后，页面仍会缩放
脚本要放在里，且需包裹在 WeixinJSBridgeReady 事件监听中——早于桥接就绪会报 WeixinJSBridge is not defined
部分低端安卓机型有 100–300ms 延迟，可加个 setTimeout(..., 0) 提前触发微任务队列

viewport meta 标签不是万能解药

很多人以为加了 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 就万事大吉，其实它对微信字体缩放完全无效。

微信公众号文章生成技能（专业版）

name wechat-article-writer-pro description 微信公众号文章完整生成技能（专业版）。输入主题即自动完成：信息调研、文章撰写（含章节配图）、5个备选爆款标题、封面图生成、带格式排版的DOCX文档输出。触发词：写公众号文章、生成公众号内容、做微信推文、公众号文章完整版。 agent_created true 微信公众号文章完整生成技能（专业版）概述本技能提供微信公众号文章从主题到成品的完整生成流程，在基础版之上增加：章节配图、DOCX 格式输出（含彩色重点文字和表格

下载