iOS Safari状态栏颜色修改指南 (非PWA)

iOS Safari 状态栏颜色修改（非 PWA）

你是不是也遇到过这样的问题：想修改网站在 iOS Safari 上状态栏的背景颜色，安卓上用个 theme-color 的 meta 标签就搞定了，iOS 上却怎么也调不对？用 apple-mobile-web-app-status-bar-style 好像也没用？查资料，又都说要添加到主屏幕变成 PWA 才行？ 别急，这篇博客帮你理清思路。

为什么 iOS 这么麻烦？

先说说，为啥 iOS 这么特殊。 主要还是因为苹果对用户体验和系统一致性的控制比较严格。安卓的 theme-color 实际上是给浏览器一个“提示”，告诉浏览器大概用什么颜色来渲染地址栏等 UI 元素。但 iOS Safari，情况不一样，它对状态栏的设计有自己的一套规则，为了避免网站随便改状态栏颜色，导致跟系统风格不搭，破坏了用户体验。

以往，苹果的思路是，如果你真想完全控制状态栏，OK，你可以通过把网页添加到主屏幕（即 PWA）来实现。添加到主屏幕后，网页可以全屏运行，脱离 Safari 的外壳，这时你就可以自由定制状态栏的样式了。所以你会发现，网上很多资料都在讲怎么用 apple-mobile-web-app-status-bar-style，并且强调要添加到主屏幕才生效。

但是！如果你就想让普通访问的网站也能改状态栏，又不想搞 PWA，有没有办法？ 其实，也有几种变通方法可以尝试。

可行的解决方案

以下列出几个亲测可行的方案，各有优缺点，你可以根据自己的需求来选择：

方案一：利用 body 元素的延伸（最简单, 但有局限）

这个方法的核心思路是：通过将 body 元素扩展到安全区域 (safe area) 之外，让 body 的背景色填充到状态栏区域。

原理： iOS 11 引入了安全区域的概念，用于防止内容被刘海或圆角遮挡。 我们可以利用 viewport meta 标签的 viewport-fit=cover 设置，让网页内容扩展到安全区域之外。

代码示例：

1. HTML (修改 viewport meta 标签)：

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

2. CSS (设置 body 背景色)：

   body {
     background-color: #00623A; /* 你想要的颜色 */
     margin: 0; /* 重要！移除默认边距 */
     padding: 0; /* 重要！移除默认边距 */
   }
   
   

   • 特别补充说明, 某些场景下，可能仅仅body背景色延伸了，还是不能很好覆盖状态栏，那么也可以将 html 根节点同步设置背景颜色。
   • 注意，设置viewport-fit 仅仅表示尝试覆盖，在ios后续的新版本中也可能失效。
     安全建议：

• 无特别安全问题，但要注意在各种 iOS 设备上进行测试，确保没有布局问题。

局限性:

• 只能够设置和body 同色的纯色状态栏，不支持透明，不能随滚动改变状态栏等复杂操作。
• 在某些老旧 iOS 版本中，该方式也可能失效。

方案二：障眼法 —— “伪造”状态栏

这个方法更像是一种视觉欺骗。它的原理是，在页面顶部创建一个和状态栏一样高的区块，然后给这个区块设置你想要的背景颜色。

原理： 我们可以使用 JavaScript 检测设备是否为 iOS 设备，如果是，则动态地在页面顶部插入一个“伪造”的状态栏元素。

代码示例：

1. HTML (不需要特别的 meta 标签)：

   <div id="fake-status-bar"></div>
   <!-- 页面的其他内容 -->
   

2. CSS (样式“伪造”的状态栏)：

   #fake-status-bar {
     position: fixed; /* 固定在顶部 */
     top: 0;
     left: 0;
     width: 100%;
     height: env(safe-area-inset-top); /* 使用安全区域顶部边距 */
     background-color: #00623A; /* 你想要的颜色 */
     z-index: 9999; /* 确保在最上层 */
     pointer-events: none;/*穿透点击*/
   }
   
   body {
     padding-top: env(safe-area-inset-top); /* 给 body 加内边距，防止内容被遮挡 */
    /* background-color: ;可以保持页面的背景色*/
   }
   
   

3. javascript 检查和启动 (也可以不用 js 直接通过 css media 设置)

function isIOS() {
    return [
      'iPad Simulator',
      'iPhone Simulator',
      'iPod Simulator',
      'iPad',
      'iPhone',
      'iPod'
    ].includes(navigator.platform)
    // iPad on iOS 13 detection
    || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
}
 
/*
if (isIOS()) {
     //nothing
}
*/

进阶用法：

• 你可以通过监听滚动事件，动态地改变“伪造”状态栏的颜色或透明度，实现更复杂的交互效果。
  例如根据页面的背景图, 动态修改伪造状态栏的颜色, 或设置特定颜色过渡效果等。
• 可以调整 padding 的计算方式以兼容老系统等.
• 可以使用 CSS 变量（--status-bar-color）来动态修改颜色, 这方便了后期修改.

安全建议：

• 这种方法基本没有安全问题，但同样要注意在各种 iOS 设备上测试。

方案三：终极大法 —— 利用Webkit 的私有 API（强烈不推荐）

声明： 此方法有被 App Store 拒绝上架的风险,仅作技术探讨, 不建议在生产环境使用!

iOS 的 WebKit 引擎实际上提供了一些非公开的 API，可以用来修改状态栏的样式。但是！这些 API 是非官方的，随时可能改变，而且使用它们可能会导致你的应用被 App Store 拒绝。

原理：
通过 JavascriptBridge 或反射调用 OC 相关 api (如 WKWebViewPrivateForUI, _updateStatusBarRequest: ), 来直接更新状态栏UI 表现。

实现步骤 (极简例子, 请勿模仿, 这里不完整提供实现细节):

通过 JavaScript 发送消息， 让 Objective-C 代码修改 statusBarStyle

• 定义 Javascript Interface 与原生的消息传递等.

• 利用系统私有API 直接完成功能调用, 具体不再赘述.

为什么强烈不推荐：

1. 违反苹果开发者规范。
2. API 不稳定: 随时可能发生变更, 稳定性毫无保障.
3. 应用审核风险: 应用随时可能被下架或禁止发布.
4. 复杂的桥接调用等带来了开发负担: 远超普通的 h5 开发成本.

绝对安全警示: 如果没有非常充分理由和明确目的，不要选择本方案。

其他补充说明

• 刘海屏和非刘海屏
  上面的方案也需注意不同形态设备, 注意通过 css media 或 编程区分处理.

• 深色模式和浅色模式：
  IOS 系统开启暗夜模式后, 可能影响背景色等设定。 强烈推荐适配暗夜模式，保证整体性。可以使用 prefers-color-scheme 来做处理：

   @media (prefers-color-scheme: dark) {
       /*body等暗黑样式定义*/
   }

• 关于black-translucent：
  最初的设计本意, 在添加 PWA到桌面启动后, 用于在全屏应用场景, 实现状态栏透明渐变(类似黑色半透明) , 其在非全屏下作用不大, 很多时候呈现的是接近背景的浅色,容易导致理解混乱。

总之，想要在非 PWA 模式下完全控制 iOS Safari 的状态栏颜色，确实有些棘手。上面几种方案都可以帮助你改善用户体验，让状态栏的颜色与你的网站更协调。 最简单的做法，就是扩展 body 背景。具体选择哪种方案，还请结合自己的实际情况来做选择。