HTML怎么做苹果全屏配置_HTML apple-mobile-web-app全屏基础

仅靠 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，无论怎么配，点开都是带导航栏的浏览器页 —— 别在这上面浪费时间调兼容性。