如何用HTML、CSS、原生JS修改安卓Chrome底部导航栏背景色？

仅通过HTML、CSS和原生JS是可以实现这个需求的，核心是利用Chrome对theme-color元标签的支持，具体步骤如下：

1. 固定设置导航栏颜色（HTML+CSS） #

首先在HTML的<head>中添加theme-color元标签，指定你想要的背景色：

<meta name="theme-color" content="#00ff00"> <!-- 替换为你需要的十六进制颜色码 -->

然后配置viewport，让页面内容能延伸到系统导航栏区域，避免底部留白：

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

最后用CSS处理页面底部的安全区域，防止内容被导航栏遮挡：

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

2. 动态修改导航栏颜色（JS） #

如果需要在页面运行过程中动态切换颜色，可以通过JS操作theme-color元标签：

// 获取对应的meta元素
const themeMetaTag = document.querySelector('meta[name="theme-color"]');
// 修改颜色值
themeMetaTag.setAttribute('content', '#ff5722'); // 替换为目标颜色码

注意事项 #

• 该效果仅在安卓Chrome浏览器中生效，且需要页面处于全屏/沉浸式状态（比如将网页添加到手机主屏幕后打开，或Chrome的全屏浏览模式）
• theme-color会同时影响顶部状态栏和底部导航栏的背景色，目前Chrome没有单独控制底部导航栏的原生API
• 选择颜色时要注意和导航栏的操作图标（返回、主页等）的对比度，确保可读性

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