@media screen and (orientation: landscape) 在微信中常失效，因x5内核对screen.orientation支持残缺且innerwidth/innerheight更新延迟；应改用window.innerwidth > window.innerheight判断横屏，并加防抖、强制重排及硬件加速等补救措施。
为什么 @media screen and (orientation: landscape) 在微信里经常失效
这个媒体查询在微信内置浏览器（尤其是 Android X5 内核）中并不可靠：窗口宽高比变化时，orientation 值可能长期卡在 portrait，甚至不触发重排。根本原因是微信 WebView 对 screen.orientation 的支持残缺，且 window.innerWidth/innerHeight 更新延迟严重——你看到的“横屏”状态，实际 DOM 尺寸还是竖屏值。
用 window.innerWidth > window.innerHeight 替代 orientation 判断
更稳定的做法是直接比较视口尺寸，绕过系统 orientation API 的缺陷：
- 在
resize事件中实时判断：if (window.innerWidth > window.innerHeight)视为横屏 - 加防抖（50ms 即可），避免频繁触发重绘
- 首次进入页面也需手动执行一次判断，因为初始
resize不一定触发 - 注意：iOS 微信偶尔在旋转后
innerWidth暂时为 0，建议加&& window.innerWidth > 100安全判断
横屏样式适配必须配合强制重绘与延迟更新
即使 CSS 类已切换，微信 WebView 仍可能因渲染管线未同步导致布局错位。常见补救手段：
- 切换横屏类后，用
setTimeout(() => { document.body.offsetHeight }, 16)强制触发重排 - 对关键容器（如视频、Canvas、自定义 navbar）单独加
transform: translateZ(0)激活硬件加速 - uni-app 或 Vue 项目中，若用
v-if控制横屏组件，建议改用v-show+ class 切换，避免 DOM 销毁重建引发的样式丢失 - LayaAir 等 Canvas 框架务必在判定横屏后手动调用
Laya.stage.resize()，不能只靠 CSS
微信横屏下字体放大引发的连锁错乱
用户开启微信「关怀模式」或「调整字体」后，rem 或 em 计算会整体偏移，导致横屏时元素溢出、按钮错位。必须双管齐下：
- CSS 层加：
body { -webkit-text-size-adjust: 100% !important; } - JS 层调用微信 JSBridge：
WeixinJSBridge.invoke('setFontSizeCallback', {fontSize: 0})，且监听menu:setfont事件动态重置 - 避免使用
vh/vw作为横屏主尺寸单位——微信对它们的解析在横竖屏切换时极不稳定
横屏适配真正的难点不在 CSS 写法，而在于微信各端内核对 DOM 尺寸、事件时机、字体策略的不一致；@media (orientation: ...) 只能作为辅助，不能当作判断依据。
