横竖屏切换元素偏移或重叠的直接原因是CSS媒体查询未覆盖方向变化、固定宽高或绝对定位脱离流式布局，以及iOS/Android浏览器不触发resize事件；应优先使用@media (orientation: portrait/landscape)、matchMedia监听、100dvh/dvw单位及组件resize调用，并在change回调中用requestAnimationFrame修正布局。
横竖屏切换后元素位置偏移或重叠
直接原因是 CSS 媒体查询未覆盖所有设备方向变化场景，或使用了固定宽高、绝对定位等脱离流式布局的写法。iOS Safari 和部分 Android 浏览器在 window.orientation 变化时不会自动触发 resize 事件，导致基于 matchMedia 或 window.innerWidth 的响应逻辑失效。
- 优先用
@media (orientation: portrait)和@media (orientation: landscape)替代仅依赖宽度断点 - 避免对
html或body设置height: 100vh，横屏时vh仍按原始视口高度计算，造成内容截断 - 若用了
position: absolute配合top/left定位，需在方向变化后手动重算坐标，或改用flex/grid布局替代
JavaScript 监听方向变化不生效
window.orientation 已被废弃，且在桌面端和部分新版移动端不可靠；resize 事件在 iOS 横竖屏切换时经常不触发（尤其页面有 viewport 缩放或输入框聚焦时）。
- 改用
window.matchMedia("(orientation: portrait)").addEventListener("change", ...)—— 这是目前最稳定的方向监听方式 - 不要只监听一次，确保在页面加载后立即检查当前方向：
const media = window.matchMedia("(orientation: portrait)"); handleOrientation(media.matches); media.addEventListener("change", e => handleOrientation(e.matches)); - 在
handleOrientation中调用document.body.offsetHeight或触发一次reflow（如读取offsetHeight），可强制浏览器重新计算布局
vw/vh 单位在横竖屏下表现异常
100vw 在横屏时可能超出屏幕（因地址栏隐藏/显示导致视口宽度跳变），100vh 同样会因 URL 栏伸缩而忽大忽小，引发错位或滚动条闪现。
- 用
100dvw/100dvh替代（d表示动态视口，Chrome 105+、Safari 16.4+ 支持） - 降级方案：用 JS 动态设置根字体大小：
function updateVw() { document.documentElement.style.fontSize = `${window.innerWidth / 375 * 100}px`; } window.addEventListener("resize", updateVw); window.addEventListener("orientationchange", updateVw);再配合rem布局 - 慎用
vh做全屏容器高度，改用min-height: 100vh+height: auto组合更安全
第三方 UI 库组件未适配方向切换
像 Swiper、Ant Design Mobile 等库的部分组件（如轮播、弹窗、日期选择器）内部缓存了初始尺寸，在横竖屏切换后不会自动 resize，导致子元素错位或溢出。
立即学习“前端免费学习笔记（深入）”；
- 手动调用组件实例的
resize方法（如swiperInstance.resize()、pickerRef.current?.updatePosition?.()） - 监听方向变化后，延迟 100ms 再调用 resize（避开浏览器渲染队列竞争）：
setTimeout(() => swiper?.resize(), 100);
- 某些库（如早期版本的
van-popup）需配合getContainer重设挂载节点，否则定位基于旧视口计算
实际中最容易被忽略的是：横竖屏切换时，input 聚焦会临时改变 viewport 缩放比例，导致 matchMedia 状态滞后一帧，必须在 change 回调里加 requestAnimationFrame 延迟执行布局修正。
