WebView横竖屏错乱主因是native未开放旋转权限或JS覆盖viewport；应配置shouldAutorotate、禁用JS动态改meta、用matchMedia监听方向、以dvh替代vh、native与H5同步方向状态。
WebView 中 viewport 设置不生效导致横竖屏布局错乱
iOS 的 WKWebView（或旧版 UIWebView）加载 HTML5 页面时，即使写了 ，横竖屏切换后页面仍可能拉伸、缩放异常或内容被裁切——根本原因常是 native 层未放开屏幕旋转权限，或 viewport 被 JS 动态覆盖。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保 native 侧的
UIViewController返回YES给shouldAutorotate，且supportedInterfaceOrientations包含UIInterfaceOrientationMaskLandscape和UIInterfaceOrientationMaskPortrait - 在 HTML 中避免用 JS 动态写入
viewportmeta（例如某些 UI 框架初始化时会重设），可加id="vp"并检查是否被重复替换 - 若使用 Cordova 或 Capacitor，确认
config.xml中已配置，否则插件会强制锁定方向
iOS 15+ WKWebView 中 window.orientation 和 resize 事件不可靠
window.orientation 在 iOS 15 后已被弃用，且 resize 事件在横竖屏切换时触发延迟甚至丢失（尤其从锁屏唤醒后）。直接监听这两个值做布局调整，大概率失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 改用
window.matchMedia监听"(orientation: portrait)"和"(orientation: landscape)"，它基于 CSS 媒体查询，响应及时且兼容性好 - 配合
visualViewportAPI（iOS 16.4+）获取真实可视区域尺寸：visualViewport.width和visualViewport.height，比window.innerWidth更准确（尤其键盘弹出时） - 避免在
resize回调中直接操作 DOM 高频渲染，加requestAnimationFrame节流
CSS 布局在横竖屏下塌陷或溢出
常见现象：竖屏正常，横屏时文字换行异常、flex 容器子项挤压、vh 单位高度不准（iOS Safari 的 100vh 包含地址栏，横屏时地址栏消失但 height 不重算）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 禁用
vh，改用dvh（dynamic viewport height）：iOS 16+ 支持，height: 100dvh会随可视区实时更新 - 对关键容器设置
min-height: -webkit-fill-available，让元素撑满视口可用高度（兼容 iOS 11~15） - 用
@media (orientation: landscape)单独调整字体、间距、栅格列数，不要只依赖 JS 切 class - 测试时务必关闭「放大文本」系统设置（设置 → 显示与文字大小 → 较大字体），否则
rem和em行为会突变
Hybrid 场景下 native 与 H5 方向状态不同步
比如 native 强制横屏（如视频全屏），但 H5 页面仍按竖屏逻辑渲染；或 native 未响应 viewWillTransitionToSize，导致 WebView frame 未更新，H5 拿到错误的 screen.width。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- native 层在
viewWillTransition(to:with:)中主动调用 JS 注入方向信息：webView.evaluateJavaScript("window.__orientation = 'landscape'") - H5 侧封装一个
getScreenOrientation()函数，优先读window.__orientation，fallback 到matchMedia，避免直接信screen.orientation（Safari 不支持该 API） - 对 WebView 的
frame做约束：在viewDidLayoutSubviews中检查并修正，防止因 Auto Layout bug 导致横屏时 width/height 未更新
横竖屏适配真正的难点不在 HTML 或 CSS 单点，而在 native 和 Web 两层生命周期、尺寸上报、事件触发时机的耦合。最容易被忽略的是系统级设置（如「显示缩放」「辅助功能」）和 WebView 实例复用时的状态残留——每次切换前手动 reset viewport meta 和清空 JS 全局 orientation 标记，比事后 debug 更省时间。
