旋转屏幕后fixed元素偏移是因视口坐标系重置延迟，需viewport同时设maximum-scale=1.0和minimum-scale=1.0；祖先transform会劫持fixed定位；sticky更稳定，兼容主流移动端，但需父容器有高度。
旋转屏幕后fixed元素位置偏移，先查viewport meta是否完整
移动端横竖屏切换时fixed元素错位，不是CSS bug，而是视口坐标系重置不及时导致的。iOS Safari和部分Android WebView在旋转后会短暂维持旧视口尺寸，直到布局重排完成，此时fixed元素仍按旧尺寸计算位置。
关键点在于标签必须同时声明maximum-scale=1.0和minimum-scale=1.0，仅靠user-scalable=no无法阻止浏览器内部缩放逻辑干扰fixed锚定。
- 错误写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> - 正确写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> - 真机测试比模拟器更可靠——模拟器常忽略视口重绘延迟，而真机在旋转瞬间会出现明显偏移
fixed元素被祖先transform“劫持”，旋转后表现更诡异
哪怕父容器只写了transform: translateZ(0)，也会创建新的包含块（containing block）。旋转屏幕时，该祖先的transform值可能被浏览器重算或缓存，导致fixed元素突然从“相对视口”跳变为“相对祖先”，且偏移量与旋转前不一致。
开发者工具里看不出问题？那就用getBoundingClientRect()验证：
const el = document.querySelector('.nav-fixed');
console.log(el.getBoundingClientRect()); // 横屏下top可能突变为非0值
- 逐层检查Computed面板中
transform、filter、backdrop-filter、will-change是否为none - 特别注意第三方轮播图、弹窗组件——它们内部默认加了
transform: translateX(0)，你没写，但它写了 - 临时加
transform: none !important能快速验证，但不能上线——它只是掩盖问题，不是修复
用sticky替代fixed是更稳的选择
position: sticky天然不受transform祖先影响，且在横竖屏切换时能自动响应滚动容器尺寸变化。只要目标元素位于滚动容器顶部或底部，它就是比fixed更鲁棒的方案。
- 适用场景：
top: 0导航栏、bottom: 0操作栏、单页内局部悬浮按钮 - 兼容性：iOS Safari 11+、Chrome 56+、Firefox 64+，覆盖当前所有主流移动端
- 注意：必须保证父容器有明确高度或内容撑开，否则sticky不会触发
真机上软键盘 + 旋转 + fixed三者叠加时最容易崩
iOS在软键盘弹出时会临时解除fixed定位逻辑，转而用absolute模拟；紧接着旋转屏幕，视口尺寸突变，导致元素坐标彻底错乱。这时靠CSS已无解，必须介入JS。
- 监听
resize事件比监听orientationchange更可靠，因为后者在iOS 15+已被废弃 - 键盘唤起时，
window.innerHeight会突变，可用它判断是否处于键盘状态 - 慎用
scroll事件动态重设top/left——滚动抖动、输入法遮挡、防抖阈值难调，容易引发新问题
真正难处理的从来不是单一条件，而是横竖屏切换瞬间恰好遇上软键盘弹出、页面又在滚动——这种组合态下，fixed几乎必然失效，这时候别硬扛，换DOM结构或改用sticky才是实际选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
