页面旋转后布局异常的主因是CSS未适配方向切换，解决关键为准确监听方向变化并动态应用样式；优先使用@media (orientation: portrait/landscape)实现原生响应，辅以resize事件监听+class切换兜底，避免固定尺寸和绝对定位，并通过viewport标签与真机测试保障兼容性。
页面在旋转屏幕后布局异常，核心原因是 CSS 布局未适配方向切换（如竖屏 → 横屏），或媒体查询未覆盖对应视口尺寸/方向。解决关键在于：准确监听方向变化 + 动态应用适配样式。
用 @media (orientation: ...) 做基础响应
这是最轻量、推荐优先使用的方案。CSS 原生支持根据设备方向自动切换样式，无需 JS 干预：
- 竖屏（portrait）：窄高视口，适合单列、顶部导航、大按钮
- 横屏（landscape）：宽矮视口，适合多列、侧边栏、紧凑表单
示例：
@media screen and (orientation: portrait) {
.container { width: 100%; padding: 16px; }
.sidebar { display: none; }
}
@media screen and (orientation: landscape) {
.container { width: 80%; margin: 0 auto; }
.sidebar { display: block; float: right; width: 20%; }
}
监听 window.orientation 或 resize 事件（兼容性兜底）
部分安卓旧浏览器不严格触发 orientation 媒体查询，可配合 JS 监听并手动加 class：
立即学习“前端免费学习笔记（深入）”；
- 用
window.orientation判断（仅 iOS & 部分安卓，值为 0/90/-90/180） - 更通用做法：监听
resize，结合window.innerWidth > window.innerHeight判定横竖屏 - 添加 class 如
is-landscape或is-portrait到或，再写对应 CSS
示例 JS：
function updateOrientation() {
const isLandscape = window.innerWidth > window.innerHeight;
document.body.className = isLandscape ? 'is-landscape' : 'is-portrait';
}
window.addEventListener('resize', updateOrientation);
updateOrientation(); // 初始化
CSS 对应：
.is-landscape .header { flex-direction: row; }
.is-portrait .header { flex-direction: column; }
避免固定宽高和绝对定位导致的错位
旋转后常见异常（如元素被截断、重叠、偏移）往往源于硬编码尺寸或脱离文档流：
- 慎用
width: 375px、height: 667px等固定值，改用100vw、100vh、max-width或弹性单位（rem、%） - 避免
position: absolute+ 固定top/left，尤其当父容器未设position: relative时，旋转后参考系易混乱 - 使用
viewportmeta 标签确保缩放正常：<meta name="viewport" content="width=device-width, initial-scale=1.0">
真机测试比模拟器更可靠
Chrome DevTools 的设备模拟无法完全复现原生方向切换逻辑（比如 Safari 在 iOS 上会延迟触发 resize）：
- 务必在 iOS 和主流安卓机型上实测横竖屏切换流程
- 关注状态栏/地址栏高度变化对
vh单位的影响（Safari 中100vh可能包含地址栏，导致内容溢出） - 可临时用
document.documentElement.clientHeight替代100vh获取真实可视高度
