直接给body设padding在iOS Safari 16.x–17.x下会触发视口偏移，因其将padding纳入可滚动范围却不调整锚点；应改用容器层（如.page）设padding+min-height:100vh+box-sizing:border-box。
body { padding } 在 iOS Safari 中会触发视口偏移
直接给 body 设 padding，在部分 iOS Safari（尤其是 16.x–17.x）下会导致页面整体向右/向下轻微偏移，滚动条异常出现，甚至遮挡固定定位元素。这不是 bug 显示，而是 Safari 对 body 的渲染逻辑：当 body 有非零 padding 且未显式设 overflow: hidden 时，它会把 padding 区域纳入可滚动范围，但不调整视口锚点。
实操建议：
- 避免直接对
body使用padding—— 即使只写body { padding: 20px; }也危险 - 如必须视觉留白，用包裹容器：新建一个
<div class="page">放在<body>内第一层，对其设padding - 若已用
body padding且出现偏移，临时补救可加：body { overflow: hidden; }，但会禁用 body 级滚动，慎用
Android WebView 的 padding 行为更“老实”，但仍有兼容陷阱
多数 Android WebView（Chrome 内核）对 body { padding: 16px; } 渲染稳定，但问题出在「继承」和「视口计算」上：当 html 或 body 同时设了 height: 100%，再加 padding，会导致内容高度超限、底部被裁切——因为 100% height 是按视口算的，padding 是额外加上的。
常见错误现象：body { height: 100%; padding: 20px; } → 页面底部内容消失、滚动条无法到底。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 去掉
body的height: 100%，改用min-height: 100vh - 把
padding移到容器层，例如：.container { padding: 20px; min-height: 100vh; } - 确保
html和body都设margin: 0; padding: 0;，避免叠加默认值
viewport meta 标签缺失时，padding 值会“失真”
没加 <meta name="viewport" content="width=device-width, initial-scale=1">，移动端会以桌面视口宽度（通常 980px）渲染，此时 body { padding: 5% } 或 padding: 2rem 的实际像素远超预期，留白过大甚至撑出横向滚动条。
这不是 padding 本身的问题，而是单位计算基准错乱。尤其 rem 依赖根字体大小，而根字体在无 viewport 下可能被强制缩放。
实操建议：
- 所有移动端 HTML 必须在
<head>中包含 viewport meta 标签 - 避免在
body上用百分比 padding（如padding: 3%），它基于 body 宽度，而 body 宽度在移动端受 viewport 影响极大，不稳定 - 优先用
px或rem配合 JS 动态调根字号（如按屏幕宽度设font-size），再用padding: 1rem
真正安全的响应式留白方案：容器 + box-sizing + vh
跨平台最稳的做法不是动 body，而是控制容器。iOS 和 Android 对 div 的 padding 解析一致，且不受视口锚点干扰。
示例结构：
<body style="margin:0;padding:0;">
<div class="page" style="padding: 20px; min-height: 100vh; box-sizing: border-box;">
<!-- 内容 -->
</div>
</body>关键点：
-
box-sizing: border-box确保padding不撑大容器尺寸 -
min-height: 100vh而非height: 100vh，防止内容少时留白不足 - 媒体查询中改的是
.page的 padding，不是body——@media (max-width: 480px) { .page { padding: 12px; } } - 若需适配刘海屏/全面屏，用
env(safe-area-inset-top)等环境变量微调顶部 padding，而非硬编码
复杂点在于：iOS 和 Android 对「视口高度」的定义存在细微差异，100vh 在 Safari 中可能包含地址栏高度，在 Chrome 中则更接近可视区域。如果页面有吸底按钮或地图类全高组件，仅靠容器 padding 不够，得配合 calc(100vh - Xpx) 或 JS 动态测可用高度——这点容易被忽略，但恰恰是留白错位的根源。
