CSS text-size-adjust在移动端横屏时失效如何解决？-css教程-PHP中文网

text-size-adjust 失效主因是 viewport 缺失、作用位置错误或 android 微信 x5 内核不支持；须确保 viewport 正确设置、css 作用于 html 或块级祖先、x5 内核用 js 桥接，并同步处理渲染时序。

css text-size-adjust在移动端横屏时失效如何解决？

直接结论：不是 CSS 写得不对，而是它根本没被浏览器解析或生效——90% 的失效源于 viewport 缺失、作用位置错误、或 Android 微信 X5 内核根本不认这个属性。

viewport 缺失或写错，`text-size-adjust` 直接被忽略

浏览器只有在「移动端渲染模式」下才解析 text-size-adjust。如果 <meta name="viewport"> 缺失、顺序靠后、或写了 width=375 这类固定值，iOS Safari 会退化为桌面布局逻辑，CSS 属性压根不触发。

必须写：<meta name="viewport" content="width=device-width, initial-scale=1.0">，且放在最前面
initial-scale=1.0 单独写等于没写，必须和 width=device-width 同时存在
真机调试时，用 window.getComputedStyle(document.documentElement).textSizeAdjust 查返回值；如果是 ""（空字符串），八成是 viewport 没生效

`text-size-adjust` 必须加在 `html` 或块级祖先上，子元素无效

这个属性不作用于文本自身，而是控制“文本所处的块级上下文”。给 p、span、a 写 text-size-adjust: 100% 完全没用，浏览器只查最近的块级父容器是否设置了该值。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

最稳妥写法：html { text-size-adjust: 100%; -webkit-text-size-adjust: 100% !important; }
局部修复（如页脚菜单）可加在包裹它的 <div class="footer"> 上，别跳过一级写到 <code>body
避免用 * { text-size-adjust: 100% }：性能差，旧版 Safari 可能忽略通配符规则，还可能误伤表单控件

iOS 有效但 Android 微信完全不响应？那是 X5 内核不支持

Android 微信用的是腾讯 X5 内核，它压根不解析 -webkit-text-size-adjust。你在 body 上加再多次 !important，getComputedStyle(document.body).webkitTextSizeAdjust 返回的仍是空字符串。

必须桥接 JS：WeixinJSBridge.invoke('setFontSizeCallback', {fontSize: 0})，其中 0 表示“系统默认”，不是“最小”
JS 必须尽早执行：放在里，监听 WeixinJSBridgeReady，不能等 DOMContentLoaded
还要监听 menu:setfont 事件，否则用户手动点微信菜单里的「调整字体」会再次放大
华为 EMUI 等定制 ROM 可能绕过 WeixinJSBridge，需 fallback 到 window.matchMedia('(min-resolution: 2dppx)') + 动态重设 html 的 font-size