manifest.json 是全屏模式的必要前提，因浏览器只认其 display 字段（"fullscreen" 或 "standalone"），meta 标签仅影响 Safari 地址栏隐藏；需正确引入、设 display 值、提供 name 和图标，iOS 还需额外 meta 标签和 apple-touch-icon。
为什么 manifest.json 是全屏模式的必要前提
直接在 HTML 里加 <meta> 标签无法真正触发 PWA 全屏模式——浏览器只认 manifest.json 中的 display: "standalone" 或 "fullscreen"。没有合法的 manifest 文件，apple-mobile-web-app-capable 这类 meta 标签最多只影响 Safari 的地址栏隐藏，不等于系统级全屏。
实操建议：
- 确保
manifest.json在根目录（如/manifest.json），且通过<link rel="manifest" href="/manifest.json">正确引入 -
display字段必须显式设置为"fullscreen"（真全屏）或"standalone"（类原生 App 窗口，无浏览器 UI） - 必须包含
name和icons（至少一个 192×192 PNG），否则 Chrome 会拒绝安装并忽略全屏行为
display: "fullscreen" 和 "standalone" 的实际差异
两者都移除地址栏和导航控件，但行为边界不同：fullscreen 会强制覆盖整个屏幕（包括状态栏），而 standalone 保留系统状态栏，更接近原生 App 感觉。
常见错误现象：设了 "fullscreen" 却仍看到状态栏 —— 多半是 iOS Safari 不支持该值，它只识别 "standalone"；Android Chrome 则两者都支持。
立即学习“前端免费学习笔记（深入）”；
使用场景建议：
- 需要沉浸式体验（如游戏、演示页）→ 用
"fullscreen"，但需配合 JS 检测平台降级 - 面向大众用户、兼顾 iOS → 优先用
"standalone"，兼容性更稳 - 不要混用：同一份 manifest 不应同时写两个 display 值，浏览器取第一个有效值
iOS Safari 的特殊处理：meta 标签不能少
iOS 不读取 manifest 的 display 字段，全靠 <meta> 标签控制外观。漏掉这步，即使 manifest 正确，Safari 仍以普通网页打开。
关键 meta 必须写在 <head> 中：
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="apple-mobile-web-app-title" content="MyApp">
注意点：
-
content="yes"是硬性要求，"true"无效 -
status-bar-style取值只有"default"、"black"、"black-translucent"，其他值被忽略 - 图标必须用
<link rel="apple-touch-icon">单独声明（iOS 不读 manifest 中的 icons）
如何验证是否真正进入全屏模式
不能只看界面有没有地址栏——要确认是否已脱离浏览器上下文。最可靠的判断方式是检查 window.navigator.standalone（仅 iOS）和 matchMedia("(display-mode: standalone)").matches（Android/Chrome）。
实操建议：
- 在页面加载后立即运行：
if (window.navigator.standalone || window.matchMedia('(display-mode: standalone)').matches) { console.log('已进入全屏/独立模式'); } - 避免用
screen.orientation或document.fullscreenElement判断，它们反映的是 DOM 全屏，不是 Web App 全屏 - 真全屏下，
history.pushState仍可用，但返回按钮行为由系统接管，JS 无法拦截
最容易被忽略的是：iOS 上用户长按桌面图标启动才触发 navigator.standalone，从 Safari 地址栏访问永远为 false。这个启动路径差异，不测试真机很容易误判。
