横屏时fixed元素偏移是因layout viewport与visual viewport不同步及transform创建新包含块所致；应改用inset替代top/left，配合env()映射安全区，并禁用transform模拟横屏。
为什么横屏时fixed元素会突然偏移
不是CSS写错了，是浏览器在横屏切换瞬间，layout viewport和visual viewport不同步：iOS Safari先冻结旧视口定位fixed元素，再重绘新尺寸，导致元素“闪一下”或卡在左下角；更隐蔽的是，有些H5页面用transform: rotate(90deg)模拟横屏，整个坐标系已旋转，top: 0实际锚定的是旋转后的左侧边缘。
用inset替代top/left动态锚定视口
inset属性能自动响应横屏、键盘弹出、地址栏收起等视口变化，比top/left更可靠：
- 改写
top: 0; right: 0; bottom: auto; left: 0为inset: 0 0 auto 0 - 避免混用：
inset: 0; left: 50%会导致left覆盖inset的左值 - 兼容性兜底必须加：
@supports not (inset: 0) { ... }，旧版Safari/安卓WebView需回落到传统四值写法
横屏下env() + calc()稳住安全区与定位基线
仅靠inset还不够——横屏时刘海、状态栏位置翻转，env(safe-area-inset-top)可能变成env(safe-area-inset-left)，必须手动映射：
- 导航栏顶部固定：用
top: calc(env(safe-area-inset-top) + 0px)，而非硬写top: 0 - 底部工具栏：横屏时
bottom失效，改用inset: auto 0 0 0+width: 100%，并确保父容器overflow-x: hidden - 真机测试时若发现延迟回位，加
setTimeout(() => { /* 强制重读 visualViewport */ }, 50)防抖
禁用transform模拟横屏，改用原生orientation
用transform: rotate(90deg)强行转屏，会让所有position: fixed元素退化为relative定位——因为transform创建了新包含块，fixed锚点从视口变成这个被旋转的容器。
- 彻底移除任何对根容器（如
#app）的transform，包括translateZ(0)、scale(1) - 依赖原生
@media (orientation: landscape)做布局切换，但注意：不要在里面改height或width，优先用100%或100dvw - 如果业务强依赖模拟横屏，把fixed元素用
teleport（Vue）或createPortal（React）挂到body直系子节点，绕过所有干扰父级
横屏错位最难缠的地方不在代码本身，而在它只在真机旋转瞬间暴露，且不同iOS版本对visualViewport的更新时机不一致——哪怕inset和env()都写对了，漏掉setTimeout防抖或overflow-x: hidden，元素仍可能在回正前闪一下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
