仅靠 apple-mobile-web-app-capable 无法实现真正全屏；真全屏需同时满足：meta 配置正确、添加到主屏幕、页面无滚动/溢出；viewport-fit=cover 是全面屏适配关键，须配合 env() 函数避开安全区，且受滚动、弹窗、缩放、视频内联等限制。
直接给结论：仅靠 apple-mobile-web-app-capable 无法实现真正「全屏」，它只控制「是否以 Web App 模式启动」；真全屏（隐藏状态栏、浏览器 UI）必须满足三个条件：meta 配置正确 + 添加到主屏幕 + 页面内无滚动/溢出。
为什么加了 apple-mobile-web-app-capable="yes" 还是不全屏？
这个 meta 标签只是告诉 iOS「允许以独立应用方式打开」，但实际是否全屏，取决于用户是否真的通过「添加到主屏幕」入口打开。Safari 地址栏里直接访问，哪怕 meta 写对了，也永远带地址栏和底栏。
- 常见错误：开发时在 Safari 中调试，反复刷新，误以为配置失效 —— 其实根本没走 Web App 启动路径
- 必须真机操作：Safari 打开页面 → 点击分享按钮 → 滑到底部点「添加到主屏幕」→ 回桌面点击图标启动
- 如果图标没显示或点开仍是 Safari 标签页，检查是否漏了
<meta name="apple-mobile-web-app-title" content="MyApp">（部分 iOS 版本要求该 title 才生成有效图标）
viewport-fit=cover 是全面屏（iPhone X 及之后）全屏的关键
没有它，safe-area-inset-* 函数无效，底部按钮会被 Home Indicator 遮挡，顶部状态栏区域留白，视觉上就不是「全屏」。
- 必须写在
<meta name="viewport">里，且viewport-fit=cover要和其他属性用逗号分隔，不能空格或等号连写 - 正确写法：
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> - 错误写法：
content="width=device-width, viewport-fit = cover"（空格、等号、引号内换行都会导致 Safari 忽略整个 viewport 声明） - iOS 11.2+ 用
env()，旧版用constant()，但必须配合viewport-fit=cover才生效，否则这两个函数返回 0
如何让底部固定元素避开 Home Indicator？
只靠 padding-bottom: env(safe-area-inset-bottom) 不够，因为 Safari 浏览器内打开时，env(safe-area-inset-bottom) 返回的是 0（它认为你没启用全屏），而添加到主屏幕后才返回 34px 左右。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
.fixed-bottom { padding-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }—— 后面的覆盖前面的，老浏览器忽略，新设备生效 - 如果用
bottom: 0定位，要同时设bottom: env(safe-area-inset-bottom)，且父容器不能有overflow: hidden，否则会裁掉内容 - 更稳妥的做法是：用
@supports (padding-bottom: env(safe-area-inset-bottom))包一层，避免低版本 iOS 解析失败影响布局
容易被忽略的硬性限制
即使所有 meta 和 CSS 都写对，iOS 仍会强制退出全屏模式，只要触发以下任一条件：
- 页面出现垂直滚动（
body或根元素高度超过视口，哪怕只有 1px） - 调用了
alert()、prompt()、confirm()等原生弹窗 - 用户双指张开缩放（即使
user-scalable=no也拦不住某些系统级手势） - 视频播放时未设
playsinline和webkit-playsinline，Safari 会自动切全屏并退出 Web App 模式
最隐蔽的一点：微信内置 WebView 完全不支持 apple-mobile-web-app-capable，无论怎么配，点开都是带导航栏的浏览器页 —— 别在这上面浪费时间调兼容性。
