仅靠apple-mobile-web-app-capable标签无法实现自动全屏，必须同时满足https、用户手动添加到主屏幕、且从桌面图标启动三个条件；viewport-fit=cover和安全区css适配同样不可或缺。
仅靠 apple-mobile-web-app-capable 标签无法让网页“自动全屏”——它只是个开关，不是触发器；真正生效必须满足三个硬性条件：HTTPS、用户手动添加到主屏幕、且从桌面图标启动。
为什么写了 apple-mobile-web-app-capable="yes" 还是带地址栏？
因为 Safari 普通标签页里打开的网页，无论 meta 怎么写，都强制显示地址栏和工具栏。apple-mobile-web-app-capable 只在「从主屏幕图标启动」时起作用。开发调试时直接刷新 Safari 页面 ≠ Web App 启动路径，此时 window.navigator.standalone 一定为 false。
常见误判场景：
- 在微信、QQ、钉钉等内置浏览器里测试——这些环境完全忽略所有
apple-*meta 标签 - HTTP 协议下测试（iOS 11.3+ 强制要求 HTTPS，否则即使添加了也会回退到普通标签页）
- 没提供合法的
<link rel="apple-touch-icon">（尺寸至少 180×180px，返回 200 状态码，PNG 推荐无透明通道）
viewport-fit=cover 是全面屏全屏的前提，不是可选项
没有它，iPhone X 及之后机型的状态栏和底部 Home Indicator 区域会留白或遮挡内容，视觉上根本不算“全屏”。它必须写进 <meta name="viewport"> 的 content 属性里，且用逗号分隔：
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
注意：viewport-fit=cover 本身不改变布局，只启用安全区环境变量；后续必须用 CSS 配合 env(safe-area-inset-top) 等函数做适配。空格、等号、引号内换行都会导致整个 viewport 声明被 Safari 忽略。
典型错误写法：
-
content="width=device-width, initial-scale=1 viewport-fit=cover"（缺逗号） -
content="width=device-width,initial-scale=1,viewport-fit = cover"（等号前后有空格） - 把
viewport-fit=cover单独写成另一个meta标签（无效）
apple-mobile-web-app-status-bar-style 的实际效果差异
这个标签只有在 apple-mobile-web-app-capable="yes" 且从主屏幕启动时才生效，但不同值对页面渲染位置影响显著：
-
default：状态栏白色文字，页面从状态栏下方开始渲染（顶部默认留出 20–44px） -
black：状态栏黑色文字，页面仍从状态栏下方开始，不覆盖内容 -
black-translucent：状态栏半透明，页面内容默认延伸至状态栏下方——但 iOS 15+ 渲染行为不一致，部分机型会变黑底或错位
如果你用了 black-translucent，务必配合 CSS 重置顶部间距，例如：
body { padding-top: env(safe-area-inset-top); }
否则可能顶部内容被遮挡或留白过大。
别指望 JS 能检测或控制是否已全屏
iOS 不暴露可靠 API 来判断是否处于 Web App 模式。唯一可用的是 window.navigator.standalone，但它只在从主屏幕图标启动时为 true；在普通 Safari 标签页中永远是 false，且无法用 JS 主动调起「添加到主屏幕」面板。
容易踩的坑：
- 用
if (window.navigator.standalone) {...}做逻辑分支，却在 Safari 标签页里调试——永远走不到true分支 - 试图用
location.href或history.pushState触发全屏切换——无效 - 混淆 PWA 的
manifest.json和 iOS 专属 meta：iOS 16.4+ 支持display: "standalone"，但低版本只认apple-mobile-web-app-capable，二者互不感知
最常被忽略的一点：即使所有配置都对，用户第一次访问仍处于 Safari 标签页模式；那个「添加到主屏幕」动作无法绕过，也无法用代码触发——这是 iOS 的硬性限制，不是 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
