真正满屏需从视口出发逐层清除干扰：设viewport禁缩放、用100vh+box-sizing:border-box、慎用height:100vh因iOS地址栏导致跳变、fixed定位更稳定、vw/vh替代%、CSS兜底+JS监听window.innerHeight实时同步高度。
HTML 页面要真正满屏显示，关键不在 html 或 body 加个 height: 100% 就完事——那只是“看起来像”，实际常被默认 margin、滚动条、视口缩放或盒模型吃掉空间。真正满屏，得从视口（viewport）出发，逐层清除干扰。
用 viewport 元标签禁用缩放并匹配设备宽度
移动端满屏的第一道门槛是浏览器默认的缩放和缩放边界。不设这个，100vh 可能被地址栏遮挡或触发意外滚动。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
initial-scale=1.0确保页面以 1:1 渲染，不自动缩放 -
maximum-scale=1.0和user-scalable=no防止用户双指缩放导致内容溢出或留白 - 注意：iOS Safari 在横屏切换时仍可能动态调整
vh，需配合 JS 补偿（见下一条）
用 100vh + box-sizing: border-box 消除高度偏差
100vh 理论上等于视口高度，但实际中常因滚动条宽度、Safari 地址栏收起/展开而跳变。更稳的方式是：固定高度 + 边框盒模型控制。
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
box-sizing: border-box;
}
.fullscreen {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}
- 必须重置
html和body的margin和padding，否则默认 8px 会撑出滚动条 -
box-sizing: border-box确保内边距、边框不额外增加元素尺寸 - 慎用
height: 100vh在 iOS Safari —— 页面滚动时地址栏隐藏，vh值会突变，建议用 JS 动态设style.height = window.innerHeight + 'px'
用 position: fixed 绕过文档流干扰（适合全屏覆盖场景）
如果目标是弹层、视频背景、Canvas 渲染等需要绝对占满且不随滚动偏移的内容，fixed 比 100vh 更可靠。
立即学习“前端免费学习笔记（深入）”；
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 9999;
}
-
fixed脱离文档流，不受父容器padding、transform或overflow影响 - 用
vw/vh而非%，避免父级未设高导致百分比失效 - 注意：
fixed元素在 iOS Safari 中若含input或软键盘唤起，可能触发布局错位，需监听resize重算
满屏真正的难点不在写法多寡，而在不同设备、不同状态（横竖屏、键盘弹出、地址栏显隐）下 vh 的不可靠性。最稳妥的方案往往是 CSS + 少量 JS 组合：CSS 做兜底样式，JS 监听 window.innerHeight 并实时同步到元素高度 —— 尤其对 WebGL、Three.js 或全屏视频这类不能容忍像素偏差的场景。
