要让网页在ios safari中真正全屏显示，需同时满足：添加apple-mobile-web-app-capable=yes和viewport-fit=cover的meta标签，并用env(safe-area-inset-top)配合css留出状态栏安全区，且仅在“添加到主屏幕”后生效。
如何让网页在iOS Safari中真正全屏显示
iOS Safari默认会在顶部保留地址栏和底部工具栏，所谓“全屏”只是视觉错觉。要实现接近原生App的沉浸式体验，关键不是隐藏浏览器UI（这无法强制），而是确保页面内容不被遮挡、状态栏样式可控。
核心是两个<meta>标签配合viewport设置：
-
<meta name="apple-mobile-web-app-capable" content="yes">：仅当用户将网页添加到主屏幕后才生效，启用独立应用模式（此时Safari UI完全消失） -
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">：必须包含viewport-fit=cover，否则env()安全区域变量无效，状态栏下方内容会被裁切
设置状态栏文字颜色为白色或黑色
iOS状态栏本身不可直接变色，但可通过<meta name="apple-mobile-web-app-status-bar-style">控制其背景透明度与文字反色逻辑。该标签只在“添加到主屏幕”后生效，且仅支持三个值：
-
default：状态栏半透，文字自动反色（浅底深字/深底浅字），但实际效果依赖系统版本，iOS 15+倾向深色文字 -
black：状态栏背景变黑，文字强制白色（注意：不是纯黑#000，是深灰黑，且仅对独立模式有效） -
black-translucent：状态栏半透黑色，文字白色，页面内容会延伸至状态栏下方——这是最常用的选择，需配合CSSpadding-top: env(safe-area-inset-top)
单独写black-translucent不保证文字白，必须同时满足：viewport-fit=cover + 页面顶部留出安全区。
为什么写了meta却没效果
常见失效原因不是代码写错，而是触发条件未满足：
- 在普通Safari标签页中，
apple-mobile-web-app-*系列meta全部被忽略——用户必须先点击分享→“添加到主屏幕” - 未声明
viewport-fit=cover，导致env(safe-area-inset-top)返回0px，CSS适配失效 - 页面HTML结构未包裹在
内，或使用了position: fixed覆盖顶部，使安全区计算异常 - iOS 16.4+对
black-translucent支持收紧，部分机型回退为default行为，建议用env()+ CSS fallback
安全区适配的最小可行CSS写法
即使启用了black-translucent，也必须用CSS把内容下推，否则会被状态栏遮住：
body {
padding-top: env(safe-area-inset-top, 20px);
}
header {
position: sticky;
top: env(safe-area-inset-top, 20px);
}
注意：env()第二个参数是fallback值（如20px），用于不支持安全区的旧设备或非Safari环境；top设为env()值时，sticky元素才能真正贴着状态栏下沿。
真正麻烦的是混合场景：既要兼容普通浏览器，又要适配iOS主屏幕启动，还要应对iPad上状态栏位置变化——这些细节往往比meta标签本身更耗时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
