移动端PWA全屏需配置manifest.json的"display": "standalone"（iOS不支持"fullscreen"），添加苹果专用meta标签，满足HTTPS、Service Worker及图标要求；iOS需手动“添加到主屏幕”，并用safe-area-inset-bottom和100dvh适配视口。
要在移动端实现 PWA 的全屏显示效果，核心是正确配置 manifest.json 并配合 Web App Install Banner 机制，同时注意 Safari 和 Chrome 在 iOS/Android 上的行为差异。
确保 manifest.json 中启用全屏模式
在 manifest.json 中设置 "display": "standalone" 或 "display": "fullscreen" 是触发全屏的关键：
-
"standalone"：最常用，隐藏浏览器地址栏和工具栏，呈现类原生应用体验（推荐） -
"fullscreen"：真正全屏（连状态栏也隐藏），但 iOS Safari 不支持该值，会降级为standalone - 避免使用
"browser"或未声明display，否则将始终以标签页形式打开
添加必要元标签并满足安装条件
仅靠 manifest 不够，还需在 HTML <head> 中补充关键 meta 标签，并满足 PWA 安装前提：
- 必须有
<meta name="apple-mobile-web-app-capable" content="yes">（iOS 专用） - 建议添加
<meta name="apple-mobile-web-app-status-bar-style" content="default">（控制状态栏颜色） - PWA 需满足：HTTPS、注册了 Service Worker、manifest 文件可访问且包含至少 192x192 和 512x512 图标
- iOS Safari 不支持自动弹出安装横幅，需引导用户手动“添加到主屏幕”
适配 iOS Safari 的特殊限制
iOS 对 PWA 全屏支持较保守，需针对性处理：
立即学习“Java免费学习笔记（深入）”；
- 不支持
display: fullscreen，standalone是实际可用的最高级别 - 状态栏无法完全隐藏，但可通过
apple-mobile-web-app-status-bar-style设为black-translucent或black提升沉浸感 - 页面高度可能被 Safari 地址栏遮挡，建议用
env(safe-area-inset-bottom)和vh结合做响应式布局 - 避免依赖
window.innerHeight计算全屏尺寸，改用screen.height或 CSS100dvh（现代 Safari 支持）
检测是否运行在 PWA 环境中
便于动态调整 UI 或提示用户安装：
- Chrome/Android：检查
window.matchMedia('(display-mode: standalone)').matches - iOS Safari：检查
window.navigator.standalone === true - 通用兜底：判断 URL 是否来自主屏幕启动（如无 referrer、无 query 参数等启发式逻辑）
- 可据此隐藏“添加到主屏幕”按钮，或启用全屏专属交互（如手势返回）
