移动端全屏浏览需分平台实现：ios依赖https、添加到主屏幕、apple-touch-icon及viewport-fit=cover配合css安全区；android则必须通过web app manifest配置standalone模式及合规图标。
HTML 实现移动端“全屏浏览”，不是靠一行代码一蹴而就，而是要分清平台、区分启动方式、配齐必要标签，并规避常见失效陷阱。真正在 iPhone Safari 上隐藏地址栏和状态栏，只在「添加到主屏幕后从桌面图标启动」这一种路径下有效；Android 则依赖 Web App Manifest。下面按关键环节说明。
必须写对的 viewport 标签
这是所有适配的基础，写错或缺失会导致页面缩成一团、断点失效、高清屏模糊：
- 必须静态写在 最前面，紧挨着 ，不能动态插入、不能重复、不能放在
后面 - 内容必须同时包含 width=device-width 和 initial-scale=1.0，缺一不可
- 全面屏设备（iPhone X 及以后、安卓刘海屏）还需加上 viewport-fit=cover，且用英文逗号分隔，不能有空格或等号前后加空格
正确示例：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
iOS 全屏的关键三要素
仅写 apple-mobile-web-app-capable="yes" 不够，它只是“准入开关”，真正生效需同时满足：
- HTTPS 协议：iOS 11.3+ 强制要求，HTTP 下即使添加到主屏幕也会退回到普通标签页
- 用户手动添加到主屏幕：Safari 中点击「分享 → 添加到主屏幕」，之后必须从桌面图标启动（不是刷新当前 Safari 页面）
-
提供合法的苹果图标：
<link rel="apple-touch-icon" href="/icon-180.png">，尺寸至少 180×180px，返回 200 状态码，PNG 格式推荐无透明通道
此时 window.navigator.standalone === true，matchMedia('(display-mode: standalone)').matches 也为 true。
安全区适配不能跳过
viewport-fit=cover 只是启用安全区变量的前提，不配合 CSS 仍会顶部留白或底部被 Home Indicator 遮挡：
- CSS 中使用
env(safe-area-inset-top)、env(safe-area-inset-bottom)等函数设置内边距 - 例如：给 body 加
padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); - 注意：若页面内容可滚动或出现横向溢出，iOS Web App 模式下可能临时恢复地址栏，所以要确保布局不触发滚动条
Android 全屏走 manifest 路径
modern Android 浏览器（Chrome/Edge/Firefox）已完全忽略 apple-mobile-web-app-capable 和 mobile-web-app-capable：
- 必须提供
manifest.json文件，并在 HTML 中正确引用：<link rel="manifest" href="/manifest.json"> - manifest 至少包含：
name、short_name、start_url、display: "standalone"（推荐）或"fullscreen" - 必须提供合规图标：至少一个 192×192 和一个 512×512 的 PNG，并列在
icons数组中 - manifest 文件需返回
Content-Type: application/manifest+json
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
