如何在WebApp中用原生JS动态修改iOS状态栏背景色？

问题描述 #

现有WebApp实现了点击/悬浮按钮切换页面背景色的功能：点击或悬浮“one”/“three”按钮时，body背景色切换为#0bb，移出时恢复为#eee。但在iPhone的iOS系统中，顶部状态栏（显示电池、信号的区域）背景色不会同步变化，仅在旋转屏幕至横屏后才会更新。

解决方案 #

核心思路 #

利用iOS Safari支持的theme-color meta标签，通过原生JS动态修改该标签内容同步状态栏与页面背景色；同时可触发页面重排作为备用方案，确保iOS系统识别背景色变化。

修改步骤 #

1. 添加初始theme-color meta标签
   在HTML的<head>中加入该标签，设置初始背景色与页面一致：

<meta name="theme-color" content="#eee">

2. 修改JS逻辑，同步更新状态栏颜色
   在切换背景色的函数中，同步修改theme-color的内容，并可选触发页面重排：

let 
  body = document.querySelector( 'body' ),
  one = document.getElementById( 'one' ),
  three = document.getElementById( 'three' ),
  themeMeta = document.querySelector('meta[name="theme-color"]');

function colorBackground() {
  const bgColor = '#0bb';
  body.style.backgroundColor = bgColor;
  // 同步更新状态栏颜色
  if (themeMeta) {
    themeMeta.setAttribute('content', bgColor);
  }
  // 可选：触发页面重排，强制iOS重新识别背景色
  body.style.paddingTop = '1px';
  void body.offsetHeight; // 强制浏览器计算布局
  body.style.paddingTop = '0';
}

function removeBackground() {
  const bgColor = '#eee';
  body.style.backgroundColor = bgColor;
  // 同步更新状态栏颜色
  if (themeMeta) {
    themeMeta.setAttribute('content', bgColor);
  }
  // 可选：触发页面重排，强制iOS重新识别背景色
  body.style.paddingTop = '1px';
  void body.offsetHeight; // 强制浏览器计算布局
  body.style.paddingTop = '0';
}

// 事件监听保持不变
one.addEventListener( 'mouseover', colorBackground );
one.addEventListener( 'mouseout', removeBackground );
three.addEventListener( 'mouseover', colorBackground );
three.addEventListener( 'mouseout', removeBackground );

完整代码示例 #

修改后的HTML

<!DOCTYPE html>
<html lang='us-EN' ontouchstart>
  <head>
    <meta charset='UTF-8'>
    <meta 
      name='viewport'
      content='width=device-width, initial-scale=1.0'
    >
    <meta name="theme-color" content="#eee">
    <link rel='stylesheet' href='css/base.css'>
    <title>trifold</title>
  </head>
  <body>
    <nav>
      <div id='one'>
        <p>one</p>
      </div>
      <div id='two'>
        <p>two</p>
      </div>
      <div id='three'>
        <p>three</p>
      </div>
    </nav>
    <script src='js/origin.js'></script>
  </body>
</html>

CSS（保持不变）

html, body, nav, div {
  margin: 0;
  height: 100%; width: 100%;
}
html, div {
  font-family: Arial;
  background-color: #eee; color: #444;
  user-select: none;
}
body {
  filter: brightness( 103.75% );
  font-size:1.5rem;
}
nav, div {
  display: flex; flex-direction: column;
}
div {
  outline: 1px solid #ddd; cursor: pointer;
}
div:hover {
  background-color: #0bb; color: #eee;
}
div:active {
  filter: brightness( 0% );
}
p {
  margin: auto; text-transform: uppercase;
}
@media( orientation: landscape ) {
  nav, div {
    flex-direction: row;
  }
}

原理说明 #

• theme-color是iOS Safari用于设置状态栏背景色的标准meta属性，动态修改其值可直接同步状态栏颜色。
• 触发页面重排是为了应对iOS偶尔缓存页面顶部背景色的情况，通过强制浏览器重新计算布局，让系统重新读取当前页面的背景色。

内容的提问来源于stack exchange，提问作者user.railCoil