box-sizing: border-box 必须全局生效，配合 html { text-size-adjust: 100%; } 和 viewport 正确配置，才能彻底解决缩放错位问题；inset 替代 top/left 可提升绝对定位稳定性。
box-sizing: border-box 必须全局生效
缩放时浮动或 Grid 项突然换行、边框粗细不一，90% 是 box-sizing: content-box 在作祟。Chrome 缩放会放大亚像素误差，width: 50% + padding: 8px + border: 1px 在 125% 缩放下实际宽度可能被四舍五入为 51%，直接撑破容器。
只给子元素加 box-sizing: border-box 不够——父容器若仍是 content-box，它的可用宽度已因 padding/border 缩减，子元素按 100% 计算仍会溢出。
-
*和*::before、*::after必须一起声明：* { box-sizing: border-box; }或更稳妥的*, *::before, *::after { box-sizing: border-box; } - 第三方 UI 库（如 Element Plus）可能已设该规则，检查 DevTools 的 Computed 面板，冲突时局部覆盖，别全局强刷
- 旧版 IE7 及以下不支持，需配合
width: calc(50% - 16px)手动扣除 padding+border 总和
text-size-adjust: 100% 要写在 html 上
横竖屏切换、系统字体变大、双击缩放后文字容器高度突变，进而引发 Flex 换行、line-height 失准，根源是浏览器擅自重排文本尺寸。text-size-adjust: 100% 是唯一能隔离这种干扰的手段，但它只对 html 元素生效。
写在 p 或 div 上完全无效；写成 text-size-adjust: none 更危险：iOS Safari 会彻底禁用字体缩放，桌面 Safari 则失去 pinch-to-zoom 能力，且对系统 DPI 缩放毫无作用。
- 必须作为最外层 CSS 规则：
html { text-size-adjust: 100%; } - 不能放在
@media查询里——它会被忽略 - 警惕第三方 SDK 动态插入的
<style></style>，可能悄悄覆盖这条规则
定位元素错位优先用 inset 替代 top/left
Chrome 缩放时 position: absolute 元素“飞走”，不是代码写错了，而是 top: 20px 这类值被锁定在初始视口像素坐标系里，缩放后渲染逻辑变了但数值没变。
inset 是现代替代方案：inset: 0 等价于 top: 0; right: 0; bottom: 0; left: 0，但它直接锚定当前视口边缘，绕开百分比冻结问题，缩放时更稳定。
- 禁止混用：
inset: 0; left: 50%会导致left覆盖inset的左值，行为不可控 - 兼容性兜底：Chrome 103+、Firefox 102+、Safari 16.4+ 原生支持；旧版本需 fallback 到传统四值写法
- 慎用
calc(50vh - 20px)：其中50vh不随缩放更新，20px固定，差值越拉越大
viewport meta 标签别混用 initial-scale 和 maximum-scale
initial-scale=1.0 必须显式声明，否则 iOS Safari 在横屏切换时可能重置缩放比例，触发二次错位；但 maximum-scale=1.0 在 iOS 16+ 已被忽略，反而干扰 Safari 的 pinch-to-zoom 检测逻辑。
固定 width=375 这类值会让 iPhone Pro Max 强行拉伸渲染，文字糊、按钮小；而 user-scalable=no 虽然禁用缩放，却损害可访问性。
- 推荐基础写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> - 删掉所有
maximum-scale和minimum-scale—— 它们已失效，还可能触发兼容模式降级 - 避免
width=375这类固定值，始终用width=device-width
真正麻烦的是那些没报错、没警告、DevTools 里看不出异常的错位——比如缩放后图标刚好切掉右下角 1px，或者两列间距忽宽忽窄。这些几乎都卡在 box-sizing 和 text-size-adjust 的组合生效边界上，改一处不改另一处，问题只是换个形式回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
