如何阻止iOS Safari菜单栏与地址栏继承HTML背景色？

问题原因 #

在iOS Safari的普通浏览模式下，theme-color标签不会生效，且你设置的apple-mobile-web-app-status-bar-style取值错误——该属性仅支持default、black、black-translucent这三个有效值，不能直接填颜色值。同时，iOS Safari会将<html>标签的背景色作为浏览器菜单栏/地址栏的背景色，导致页面背景色渗透到浏览器UI区域。

解决方案 #

1. 修正Meta标签（仅适用于PWA模式） #

如果你的网站需要以PWA（添加到主屏幕）模式运行，先修正meta标签的错误配置：

<meta name="theme-color" content="#4285f4">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 使用有效值 -->

• apple-mobile-web-app-status-bar-style可选值说明：
  • default：默认样式，状态栏为白色，文字为黑色
  • black：状态栏为黑色，文字为白色
  • black-translucent：状态栏半透明，文字为白色，页面会延伸到状态栏下方

2. 普通浏览模式下的修复 #

针对普通网页浏览场景，通过分离<html>和页面主体的背景色来解决渗透问题：

方法一：将页面背景移至<body>

修改CSS，把页面主体的背景色设置在<body>上，同时给<html>设置你希望浏览器栏显示的颜色：

html {
  background: #4285f4; /* 浏览器栏目标颜色 */
}

body {
  color: #fff;
  background: #b93cff; /* 原页面背景色 */
  min-height: 100vh;
  margin: 0; /* 消除默认边距，避免html背景露出 */
}

方法二：使用容器包裹页面内容

如果需要保留<body>透明状态，可以用一个容器包裹所有页面内容，给容器设置背景色，同时给<html>设置浏览器栏颜色：

html {
  background: #fff; /* 匹配Safari默认浏览器栏背景 */
}

body {
  color: #fff;
  background: transparent;
  margin: 0;
}

.page-container {
  background: #b93cff;
  min-height: 100vh;
}

然后在HTML中将所有内容放入容器：

<div class="page-container">
  <!-- 页面所有内容 -->
</div>

内容的提问来源于stack exchange，提问作者Slevin