现代移动端浏览器中，mobile-web-app-capable 已完全失效：android chrome 自73版起移除支持，ios safari 从未识别；真正生效的是 manifest.json 中的 display: "standalone"（推荐）或 "fullscreen"，并需配合 https、正确引用 manifest、合规图标及 viewport-fit=cover 等完整配置。
mobile-web-app-capable 在现代移动端浏览器中基本无效，Android Chrome 自 2019 年起已移除对该 meta 的支持；真正起作用的是 manifest.json 中的 display: "standalone" 或 "fullscreen"。
为什么 mobile-web-app-capable 不再起作用
这个标签曾被部分 Android 浏览器（如旧版 Chrome）识别，但早在 Chrome 73+ 就被弃用并彻底移除。现在写 <meta name="mobile-web-app-capable" content="yes"> 对任何主流浏览器都无实际效果。
- Chrome / Edge / Firefox 安卓版：完全忽略该 meta，不触发任何行为
- iOS Safari：从不支持该标签，只认
apple-mobile-web-app-capable - 即使配合
add to home screen，也仅靠 manifest 文件生效，与该 meta 无关
安卓端真正生效的全屏配置路径
必须提供合法的 manifest.json 文件，并在 HTML 中正确引用，否则“添加到主屏幕”后仍以普通标签页打开。
-
<link rel="manifest" href="/manifest.json">必须放在中，路径需可访问且返回Content-Type: application/manifest+json -
manifest.json至少包含：name、short_name、start_url、display: "standalone"（推荐）或"fullscreen" -
display: "standalone"会隐藏地址栏和底部导航栏，但保留状态栏；"fullscreen"会尝试隐藏状态栏（受系统限制，实际常退化为 standalone） - 图标必须提供至少一个
192x192和一个512x512的 PNG，且声明在 manifest 的icons数组中
iOS 和安卓共用的 viewport 与安全区适配
即使 Web App 启动成功，若没配好视口和安全区，全面屏设备（iPhone X 及以后、Android 刘海屏）仍会留黑边或遮挡内容。
-
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">必须存在，且viewport-fit=cover不能拼错、不能有空格、不能用分号分隔 - CSS 中需用
env(safe-area-inset-top)、env(safe-area-inset-bottom)等函数做内边距适配，例如：padding-top: env(safe-area-inset-top) - 避免页面出现滚动条或内容溢出——iOS 在 Web App 模式下一旦检测到可滚动，可能临时恢复地址栏
- 不要依赖
window.navigator.standalone判断安卓是否全屏，它在 Android 上始终为undefined或false；安卓应检查matchMedia('(display-mode: standalone)').matches
调试时最容易踩的三个坑
真机测试前务必确认这三点，否则反复刷新 Safari 或点击“添加到主屏幕”都白忙。
- HTTPS 缺失：iOS 11.3+ 和现代 Android 要求 manifest 和页面均通过 HTTPS 提供，HTTP 下添加后启动仍回落为普通标签页
-
apple-touch-icon缺失或 404：iOS 不显示“添加到主屏幕”入口，哪怕 meta 全对也没用；建议提供<link rel="apple-touch-icon" href="/icon-180.png">，尺寸 ≥ 180×180，返回 200 - manifest 引用路径 404 或 CORS 阻断：Chrome 控制台 Network 标签页里看
manifest.json是否返回 200，响应头是否含Content-Type，是否被跨域拦截
Web App 全屏不是加几个 meta 就能成的事，本质是平台级启动协议——iOS 看 apple-mobile-web-app-capable + 主屏幕入口 + HTTPS + viewport-fit，安卓看 manifest + display + 图标 + HTTPS。漏掉任一环，用户点开的还是带地址栏的网页。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
