apple-mobile-web-app-capable是ios safari识别pwa全屏模式的关键meta标签，content必须为"yes"且需配合apple-mobile-web-app-status-bar-style、apple-touch-icon及https环境，并通过“添加到主屏幕”启动才生效。
什么是 apple-mobile-web-app-capable？
这是 iOS Safari 用来判断网页能否以“PWA 全屏模式”（即去掉地址栏、状态栏，像原生 App 一样启动）运行的关键 <meta> 标签。它只对通过主屏幕添加的网页生效，且仅在 Safari 和基于 WebKit 的浏览器中起作用。
值必须是 yes，写成 true、1 或空字符串都无效——iOS 会直接忽略。
apple-mobile-web-app-capable=yes 必须配合哪些标签？
单独加这一条没用。Safari 要求至少同时满足三个条件才触发全屏：
<meta name="apple-mobile-web-app-capable" content="yes">-
<meta name="apple-mobile-web-app-status-bar-style" content="default|black|black-translucent">（不加也能全屏，但状态栏样式会回退到默认） -
<link rel="apple-touch-icon" href="/icon-192x192.png">（必须存在，且路径可访问；尺寸建议 180×180 或 192×192）
缺任意一个，用户从主屏幕点击图标后仍会打开带地址栏的普通 Safari 页面。
为什么加了还是不全屏？常见失效原因
最常踩的坑不是代码写错，而是环境或配置细节被忽略：
Manage Apple Notes
下载
使用 inotes CLI 从终端管理 Apple Notes。当需要在 macOS 的 Notes.app 中列出、读取、创建、编辑、删除或搜索备忘录时使用。
- 页面未通过 Safari 的「分享 → 添加到主屏幕」操作安装——直接在 Safari 里点刷新或重新打开不会进入全屏模式
-
apple-touch-icon返回 404 或 MIME 类型错误（比如服务器返回text/plain而不是image/png） - 使用了 HTTP 协议（非 HTTPS）：iOS 11.3+ 要求 PWA 全屏必须走 HTTPS，否则 Safari 拒绝启用该能力
- 缓存导致旧 meta 标签仍在生效：真机测试时务必硬刷新（在地址栏输入网址后按「前往」，或关闭所有 Safari 标签页再重开）
和 manifest.json 的 display: "standalone" 冲突吗？
不冲突，但行为优先级不同。iOS Safari 完全无视 manifest.json 中的 display 字段——它只认自己的 apple-mobile-web-app-capable。Android Chrome 则相反：它忽略这个 meta，只看 manifest.json。
所以跨平台 PWA 必须双写：
<meta name="apple-mobile-web-app-capable" content="yes"><link rel="manifest" href="/manifest.json">
其中 manifest.json 里要有：{"display": "standalone", ...}。两者互不替代，少一个，对应平台就掉全屏。
真正容易被忽略的是：iOS 对 icon 尺寸和格式极其敏感，哪怕 apple-touch-icon 是 PNG 但带 alpha 通道透明背景，某些旧版本 iOS 会静默失败——建议用纯色背景 + 无透明通道的 PNG。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
