如何让Safari网页适配设备全屏显示？解决iPhone主屏幕网页黑块问题

1. 配置视口Meta标签 #

添加或修改页面的视口标签，关键是开启viewport-fit=cover，让内容覆盖整个屏幕区域：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

2. 启用Web App独立模式 #

添加以下Meta标签，确保网站在主屏幕打开时隐藏Safari界面：

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

• apple-mobile-web-app-capable="yes"：开启独立Web App运行模式
• apple-mobile-web-app-status-bar-style="black-translucent"：设置状态栏半透明，让内容可延伸至状态栏下方

3. CSS适配全屏高度 #

设置基础样式消除默认边距，并确保页面高度占满设备：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

如果有底部固定元素，可使用安全区域变量适配Home Indicator：

.fixed-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

完成以上设置后，网页添加到iPhone主屏幕打开时就能占满整个设备显示高度，不会出现菜单消失后的黑块。

内容的提问来源于stack exchange，提问作者Юрий Антонов