必须写对viewport meta标签并重置body样式才能实现手机浏览器“全屏”：正确写法是，同时html, body{margin:0; padding:0; height:100%; overflow:hidden;}。
viewport meta 标签必须写对
手机浏览器默认缩放页面，不加或写错 <meta name="viewport">，就不可能全屏。常见错误是漏掉 width=device-width 或写成固定值（比如 width=1200），这会让页面强行按桌面宽度渲染，再怎么调 CSS 都白搭。
-
width=device-width是基础，告诉浏览器用设备真实宽度 -
initial-scale=1.0必须带上，否则 ios safari 可能默认放大文本导致横向滚动 - 别加
user-scalable=no——它在 iOS 10+ 上已失效，且影响可访问性 - 完整写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
body 和 html 要清空默认边距和滚动
即使 viewport 对了， 默认有 margin、padding，还有可能触发横向滚动条（比如子元素宽 > 100vw），结果页面左右留白或能拖动，根本谈不上“全屏”。
- 强制清除：
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; } -
overflow: hidden很关键——禁掉滚动条，但注意：它也会屏蔽 touchmove 事件，如果页面需要手势操作（如滑动轮播），得改用局部容器控制 - 避免子元素设
width: 100vw后因滚动条宽度计算偏差溢出（尤其 android chrome），优先用width: 100%或flex: 1
全屏不是“撑满视口”，而是“无干扰显示”
很多人以为加个 height: 100vh 就完事，但 vh 在移动端很不稳定：Safari 地址栏收放会动态改变视口高度，导致内容突然跳动或截断；Chrome on Android 也有类似问题。
- 真要高度填满，优先用
height: 100%+display: flex布局，靠父容器继承高度 - 如果必须用
vh，加 js 补偿：document.documentElement.style.setProperty('--vh', window.innerHeight * 0.01 + 'px');，然后 CSS 里用height: calc(var(--vh, 1vh) * 100); - 状态栏、URL 栏、底部导航栏属于浏览器 ui，网页无法真正“覆盖”它们——所谓“全屏”只是视觉上不露白边、不滚动、不缩放
iOS Safari 的地址栏行为必须接受
无论你怎么写，iOS Safari 在页面滚动时会自动隐藏地址栏，造成视口高度变化。这不是 bug，是系统级交互逻辑，硬要用 JS 监听 resize 或 scroll 强行重算高度，反而引发抖动或卡顿。
立即学习“前端免费学习笔记（深入）”；
- 设计阶段就要接受这个事实：顶部/底部留出安全区域（用
env(safe-area-inset-top)等 CSS 环境变量） - 不要依赖固定像素定位顶部按钮，改用
top: env(safe-area-inset-top) - 如果项目是 PWA，加
"display": "standalone"到 manifest.json，安装后启动能绕过 Safari 地址栏——但这和浏览器内打开是两回事
真正的难点不在代码多寡，而在区分“浏览器允许的全屏”和“系统级全屏”。前者靠 viewport + 重置样式 + flex 布局就能稳住；后者（比如视频全屏、webgl 全屏）得走 requestFullscreen() API，而且受用户手势触发限制。日常页面适配，盯死那行 meta 和 body 的 margin 就够了。