移动端盒模型适配核心是补全伪元素和表单控件的box-sizing：必须三行并设、::before、*::after为border-box；旧版safari需配合-webkit-appearance:none；切换后offsetwidth等返回值含padding/border，js尺寸逻辑需同步调整。
移动端盒模型适配的核心不是“用不用 box-sizing”，而是“漏掉哪一环，布局就 silently 崩掉”。全局设 border-box 是起点，不是终点。
为什么必须写 *::before 和 *::after
伪元素不继承父级 box-sizing，默认仍是 content-box。你写了 * { box-sizing: border-box; }，但 ::before 画的下拉箭头、遮罩层、装饰边框仍按“内容宽 + padding + border”计算——容器看起来没溢出，实际内部多撑开几像素，导致换行、滚动条意外出现、定位偏移。
- DevTools 里检查任意伪元素的
computed box-sizing，能看到它确实是content-box（除非你显式声明） - 常见踩坑场景：用
::after实现卡片阴影、渐变遮罩、三角形箭头时，尺寸错位 - 三行规则缺一不可：
* { box-sizing: border-box; }、*::before { box-sizing: border-box; }、*::after { box-sizing: border-box; }
表单控件要单独处理
旧版 Safari（≤12）和部分 Android WebView 对 <input>、<select></select>、<textarea></textarea> 的 border-box 支持不完整：光标位置偏移、高度塌陷、边框渲染错位。这不是 bug，是原生 UI 层未完全适配。
- 必须配合
-webkit-appearance: none才能稳定生效 - 若项目需支持 iOS 12 及更早版本，建议对这些元素保留
content-box，或只在必要处局部设border-box - 不要依赖全局通配符覆盖表单控件，必须显式选择并测试
offsetWidth 和 getBoundingClientRect() 的值会静默变化
切换到 border-box 后，element.offsetWidth、element.getBoundingClientRect().width 返回的是“含 padding + border”的总宽，不再是 content-box 下的纯内容宽。这不会报错，但会让依赖尺寸的逻辑跑偏。
- 重点检查：
Tooltip自动翻转判断、弹窗居中计算、拖拽缩放比例、Canvas 坐标映射 - 调试技巧：临时禁用全局
box-sizing规则，在 DevTools 里对比offsetWidth值变化 - 避免在
:hover或 CSS 动画中动态切换box-sizing——transition 对它无效，只会触发 layout thrashing
真正麻烦的不是加那三行 CSS，而是加完之后没人去查 JS 里那些隐式依赖 content-box 的尺寸计算。尤其当设计稿给的是“视觉宽度”，而代码读的是 offsetWidth，偏差就藏在毫厘之间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
