全屏布局需重置html/body的margin和padding、设100vw/100dvh、加overflow:hidden，并配viewport标签；iOS Safari中100vh不稳，应优先用100dvh并降级处理。
全屏布局的核心是移除默认边距和滚动条
浏览器给
和
默认加了 margin 和 padding，还会在内容超宽/高时显示滚动条，这两点直接破坏“全屏”观感。必须显式重置。
在 CSS 中给
和
同时设置
加
确保占满视口，而不是仅占内容高度
用
阻止意外触发的滚动条（比如子元素溢出或字体渲染导致的微小滚动）
避免 viewport 缩放导致的“假非全屏”
移动端尤其常见：页面看似全屏，但实际被缩放，边缘留白或文字模糊。这通常是因为缺少或错误配置
标签。
必须在
中加入：
让页面宽度匹配设备逻辑像素；
禁止初始缩放；
防止双指缩放破坏布局（如需交互可去掉此项）
漏掉这个标签，CSS 的
在 iOS Safari 中可能计算为“视觉视口高度”，而非“布局视口”，导致底部空白
100vh 在 iOS Safari 中失效怎么办？
iOS Safari 的地址栏收起/展开会动态改变
单位的基准高度，导致元素突然跳动或留白——这是最常被忽略的兼容性坑。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
不要只依赖
做全屏容器
改用
（dynamic viewport height），它始终基于当前可见视口高度，iOS 16+ 和 Chrome 105+ 支持
兼容老版本可降级：
（后声明的生效）
若需支持更老 iOS，可用 JS 动态设高度：
，并监听
事件更新
全屏 ≠ 全屏 API，别混淆概念
用
是让整个浏览器窗口（含地址栏）进入系统级全屏，和“页面内容铺满视口”的 CSS 全屏布局无关，且会触发用户权限提示。
立即学习
“
前端免费学习笔记（深入）
”；
日常说的“页面全屏布局”指 CSS 层面的视口填充，不需要 JS 权限，也不影响浏览器 UI
适合播放器、演示页等强沉浸场景，但有兼容性限制（如 Safari 要求用户手势触发）
两者混用反而容易出问题：比如先用 CSS 铺满，再调用全屏 API，可能因地址栏消失导致
突然变大，内容溢出
实际效果是否真“全屏”，关键看
兼容性处理和 viewport 标签是否到位，其余都是锦上添花。
htmlbodymargin: 0; padding: 0;width: 100vw; height: 100vh;overflow: hidden;width=device-widthinitial-scale=1.0user-scalable=no100vhvhheight: 100vh;height: 100dvh;height: 100vh;
height: 100dvh;document.documentElement.style.height = window.innerHeight + 'px';resizerequestFullscreen()requestFullscreen()100vh100dvh