fixed定位缩放偏移非bug而是浏览器渲染机制所致，应改用inset替代top/left、禁用原生缩放而用transform:scale()、移动端软键盘需动态计算bottom、viewport必须含initial-scale=1.0和maximum-scale=1.0，并注意祖先元素transform等会致fixed降级。
fixed定位在缩放时偏移不是 bug，是浏览器渲染机制决定的：它锚定的是缩放前的视口逻辑像素坐标系，而缩放后该坐标系与实际渲染位置脱节。直接修 top/left 值无效，得换锚定方式或控制缩放本身。
用 inset 替代 top/left/right/bottom
inset 是现代 CSS 对 fixed/absolute 的语义化简写，它不依赖初始视口尺寸冻结行为，而是直接锚定到当前视觉视口边缘，缩放时更稳定。
-
inset: 0等价于top: 0; right: 0; bottom: 0; left: 0，但不会被缩放“冻住” - 避免混用：
inset: 0; left: 50%会导致left覆盖inset的左值，行为不可控 - 兼容性需 fallback：
inset在 Chrome 103+、Firefox 102+、Safari 16.4+ 支持；旧版本必须回退到四值写法
禁用原生缩放，改用 transform: scale() 主动控制
浏览器 Ctrl+/Cmd+ 缩放会改变整个渲染树基准，position: fixed 必然错位——这不是 JS 能修的，是渲染管线行为。真正可控的方式是放弃它。
- 把
transform: scale(1.2)应用在最外层容器（如#app），而非单个定位元素 - 同步设置
transform-origin: 0 0（左上）或50% 50%（居中），对齐设计稿基准点 - 不要对含
position: fixed子元素的容器用scale()：fixed 元素会脱离视口定位流，变成相对该容器定位
移动端软键盘弹出时 fixed 错位，别硬扛，换 position: absolute
软键盘弹起时，浏览器把 fixed 锚定在被压缩/冻结的 visual viewport 底部，而该视口高度已变，但元素不会重算位置。
立即学习“前端免费学习笔记（深入）”；
- 根容器（如
body或#app）必须设position: relative和min-height: 100vh（不能只写height: 100vh） - 底部元素加
width: 100%，并监听focusin/blur动态计算bottom值 - 计算时机关键：在
focusin回调里加setTimeout(() => { }, 0)，确保 DOM 重排完成后再读window.innerHeight - inputRect.bottom
viewport meta 标签漏配导致 iOS 锚点漂移
只写 <meta name="viewport" content="width=device-width"> 是不够的。iOS Safari 在高 DPR 设备上会悄悄缩放页面，让 fixed 的坐标系和实际渲染视口脱节。
- 必须同时包含：
width=device-width、initial-scale=1.0、maximum-scale=1.0（user-scalable=no可选但非必需） - 漏掉
maximum-scale=1.0，iOS 上双击放大仍有效；漏掉initial-scale=1.0，字体小的页面可能被自动放大 - 真机测试比模拟器关键——模拟器常忽略缩放重算过程，而真机旋转瞬间就能复现偏移
最易被忽略的一点：任何祖先元素只要带 transform（哪怕只是 translateZ(0)）、overflow: hidden、filter 或 opacity ，都会让 <code>fixed 降级为 relative 行为，定位基准变成该祖先——这时你调 top 值，其实是在相对一个已缩放的父容器计算。
