iOS 主屏 Web 应用的状态栏颜色来源

发布于 2026-10-20更新于 2026-10-22作者 Carey Gill · 编辑流程

行为实测 2026-10-20，iPhone 16 Pro，iOS 18.6.2 (22G100)S，截图或录屏补充条件

使用默认状态栏样式的主屏 Web 应用，如果页面的 <meta name="theme-color"> 与 manifest 的 theme_color 不同，或者只声明了其中一个，iOS 18.6.2 上显示时间、信号和电量的那条条带会取哪个颜色？

状态栏条带优先取页面 theme-color meta 的颜色，没有 meta 时取 manifest 的 theme_color。截图拍于 2026-10-20，设备是 iPhone 16 Pro，系统为 iOS 18.6.2（22G100）。

设置不同的主题色

主测试无法区分颜色来源。实验室和演示应用的 manifest 都声明 theme_color #161616，截图中的应用内页面也都声明了 #161616 的 theme-color meta。当晚的补测（第 18c 步）安装了三个独立应用，各有自己的 manifest 和作用域。页面为白色，没有页头，使用默认状态栏样式（没有 apple-mobile-web-app-status-bar-style meta），也没有 viewport-fit=cover。

应用	网址	manifest `theme_color`	页面 `theme-color` meta
M1	`/lab/device-tests/t4/theme-m1/`	`#d00000`（红）	`#00a050`（绿）
M2	`/lab/device-tests/t4/theme-m2/`	无	`#d00000`（红）
M3	`/lab/device-tests/t4/theme-m3/`	`#00a050`（绿）	无

第四种情形是在已有的 PWA Lab 应用内打开 theme-red 页面，其 meta 为 #d00000，而实验室 manifest 为 #161616。每种结果对应的解读（例如「M1 为红色说明 manifest 优先」）在截图之前就写进了操作清单。

我们从截图读取条带颜色。代理在每张 1206 x 2622 的截图中，于条带内避开时间和电量字形取了六个像素点：(30, 20)、(400, 30)、(600, 100)、(1150, 170)、(30, 170)、(600, 180)；这台 iPhone 上条带止于 y 186（N64）。操作员也逐一报出了条带颜色。M1 至 M3 没有仪器读数。主测试中，默认样式页面的几何有仪器读数（内部高度 812/874，safe-area-inset-top 为 0，N25 至 N29），另有 17 张竖屏截图用同样方法取样（N62）。

怎么运行

在 Safari 中打开 https://openpwa.net/lab/device-tests/t4/theme-m1/，点按分享 → 添加到主屏幕 → 添加。对 …/t4/theme-m2/ 和 …/t4/theme-m3/ 重复一遍。添加后得到三个独立应用，对应灰色的「M1」「M2」「M3」图标。
保持浅色外观（设置 → 显示与亮度）和竖屏。
从图标打开每个应用，截一张能看到条带的图。这些页面会打印各自的 manifest 颜色、meta 颜色和 standalone / true。
也可以打开 PWA Lab 应用（把 https://openpwa.net/lab/device-tests/ 添加到主屏幕），在 T4 表格中于应用内打开 theme-red 并截图。
先说出每条条带的颜色，再用图片编辑器在条带内、避开时间和电量字形的位置取几个像素核对。
根据颜色判断结果。M1 为绿色表示 meta 优先于 manifest；M2 为红色表示没有 manifest 颜色时用 meta；M3 为绿色表示 manifest 颜色是后备。

截图按 <YYYY-MM-DD>_<device-slug>_<os-version>_<test-id>_<n>.png 命名，例如 2026-10-20_iphone16pro_ios18.6.2_T4_18c_M1.png。

T4 已安装应用的状态栏区域（6 分钟）
测试页 v1：打开测试：t4/baseline、t4/fixed、t4/sticky、t4/safe-area、t4/threshold、t4/white-top、t4/theme-red、t4/bg-green、t4/dynamic
T4-18c manifest theme_color 与 meta theme-color 对照（M1、M2、M3 应用）（含在 T4 内）
测试页 v1：打开测试：t4/theme-m1、t4/theme-m2、t4/theme-m3

结果

在 iOS 18.6.2 上，只要页面有 theme-color meta，条带就取它，即使与 manifest 不同也是如此；页面没有 meta 时退回 manifest 的 theme_color。每张图的六个取样点完全相同。M1 为 #00a050（meta，压过 manifest 的 #d00000），M2 为 #d00000，M3 为 #00a050，PWA Lab 内的 theme-red 为 #d00000，压过实验室 manifest 的 #161616（S，N64、N65；操作员对四者的颜色描述全部一致，O）。theme-red 说明颜色随当前页面变化，添加应用时没有固定这个值。

主测试中，默认样式页面的 17 张竖屏截图里，条带都是 rgb(22, 22, 22)，即 #161616，其中 15 张的六个取样点全部如此。T4_4 里 (600, 100) 这一点落在系统铃声浮层上，读数为 #000000；T8_1a 里下方三个点落在通知横幅及其阴影上。除这些浮层外，条带从未出现 #000000，时间后面既没有模糊也没有页面内容（S，N62，浮层取样点已对照归档截图重读）；页面内容到不了条带，因为视口从屏幕顶部往下 62 px 才开始（A，N25 至 N29）。置信标签分别为颜色 S、几何 A。

2026-10-20，iOS 18.6.2

使用默认状态栏样式时，应用的视口从顶部往下 62 px 开始（874 px 中的 812 px），内容永远到不了状态栏那一条，即使加了 viewport-fit=cover 也一样，它只多出 34 px 的底部内边距；状态栏是纯色，没有模糊。颜色取自页面的 theme-color meta，即使 manifest 的 theme_color 不同、即使是在已有应用里打开的页面也是如此；页面没有 meta 时才用 manifest 的 theme_color（依据 M1、M2、M3 和 theme-red 截图中的状态栏像素）。

日期

2026-10-20

设备

iPhone 16 Pro

系统版本与构建号

iOS 18.6.2 (22G100)，正式版

环境

主屏应用

结果

符合预期

关键数值

viewportTopOffsetPx: 62
innerHeight: 812
screenHeight: 874
safeAreaInsetTopPx: 0
viewportFitCoverInsetBottomPx: 34
stripDefault: #161616
blur: false
m1ManifestD00000Meta00a050: #00a050
m2MetaD00000Only: #d00000
m3Manifest00a050Only: #00a050
themeRedMetaD00000LabManifest161616: #d00000

可信度

S，截图或录屏

测试

T4, T4-18c

实验笔记条目

N25, N26, N28, N29, N62, N64, N65, N65-a

研究

阅读研究 · 数据包

测试页

测试页 v1

使用的测试页 v1 文件（15 个），线上字节的 SHA-256

/lab/device-tests/t4/baseline/ 8a5c90d43e2fadf09146d7887de88b159d947c13b17e79baf8b05bacf932c975
/lab/device-tests/t4/fixed/ 8f68544e6687a31dbf425491457625d8557fa4c983adfa12045cd51d4216b7ef
/lab/device-tests/t4/sticky/ c09bf8049ff1b760039d2cf953460ce4c312928c52bae75b245f2ae9fd5886e1
/lab/device-tests/t4/safe-area/ 12157b148011c3955a66cb7244929b89e4ed781b15a21a177c1f568d32061472
/lab/device-tests/t4/theme-red/ db413afe139f30454394c79948080392b91d64610768ac6eeb650a566f713922
/lab/device-tests/manifest.webmanifest cab4e60719fd1f9c84d04aada2ad6cd937f50615ce646c3ed20f14f0ca09832b
/lab/device-tests/t4/theme-m1/ 995f7e83ff52462c9614b4962ddef1fb005e39542d5164cd16da94a235998289
/lab/device-tests/t4/theme-m1/manifest.webmanifest 617d398364f53cca52ae729c685138fdbe8e1b74c1de9c84143369bb30fdec83
/lab/device-tests/t4/theme-m1/icons/m1-180.png c1dda46ca25f717484a025b2764a6023f719cf3a68a2cd35f8d2c807a52f1835
/lab/device-tests/t4/theme-m2/ ec109688594d98514278aa771b5939d3f3e47577a95fdf304da2141efcc29fd3
/lab/device-tests/t4/theme-m2/manifest.webmanifest 8b559393ef043e039f5f40f56601c9648af935edce67dce0096690b5ab433238
/lab/device-tests/t4/theme-m2/icons/m2-180.png 616dff927b60c6c4d4e303f6549b5d31236020fc9bea56443d06ee4ab812e81a
/lab/device-tests/t4/theme-m3/ 2169cee87e31785dd261187bcb4cd31144c90274e3ab189cd494299af26c8972
/lab/device-tests/t4/theme-m3/manifest.webmanifest 7d0bec5123b01bf3963900291835c42b0b9c1724673aef01d85b77ad3645e754
/lab/device-tests/t4/theme-m3/icons/m3-180.png 0dd9e3d17de4495c35d69a0b7309573642e1867b7ed54a2dd3265db80332cdfb

在 Safari 标签页中，页面的蓝色页头滚走、页面顶部变白后，条带仍是 #161616（S，截图 T4_5，N62），可见标签页用 theme-color meta 给状态栏区域着色，没有从页面顶部内容取色。

来源中的主题色优先级

Web Application Manifest 把 theme_color 定为应用上下文的默认主题色，并规定当作用域内的文档含有 name 为 theme-color 的 meta 元素时，用户代理「可以」（MAY）覆盖默认主题色（Web Application Manifest，theme_color 成员，w3.org）。规范允许覆盖，但不作要求。WebKit 在 Safari 15 的文章中同时为 HTML meta 标签和 Web Manifest 引入了 theme-color，并说它会改变 iOS 15 上 Safari 的状态栏和过度滚动区域的颜色（New WebKit Features in Safari 15，webkit.org），但没有说已安装应用中哪个优先。MDN 介绍了这个 meta（theme-color，MDN）。

BCD 记录 iOS 版 Safari 自 15 起支持 html.elements.meta.name.theme-color，备注为「自 Safari 26 起，主题色只用于已安装的 Web 应用」（BCD html/elements/meta.json，github.com）；manifests.webapp.theme_color 同样自 15 起支持（BCD manifests/webapp/theme_color.json，github.com）；两者都在 2026-10-20 读取。两个条目都没有说明哪个来源优先。Firtman 的笔记列出 theme_color 自 15.0 起支持，并建议用 theme-color meta 取代 apple-mobile-web-app-status-bar-style（iOS PWA Compatibility，firt.dev）。

实测为 BCD 的支持记录补充了条件。两种声明都如 BCD 所说受支持；在 iOS 18.6.2 的已安装应用中，页面 meta 优先，没有 meta 时回退到 manifest 颜色，记录了这个版本如何选择规范允许的颜色来源。本次测试把条带的几何与颜色算作对已有文档行为的 18.x 实测基线，不算新发现。这个清单成员见 theme_color 与 background_color 清单成员。

数据

来自 iOS 18.6.2 数据包（CC BY 4.0）。

2026-10-20_iphone16pro_ios18.6.2_T4_18c_M1.png、…_T4_18c_M2.png 和 …_T4_18c_M3.png，三个应用（N64）。
2026-10-20_iphone16pro_ios18.6.2_T4_12a.png，PWA Lab 内的 theme-red。
2026-10-20_iphone16pro_ios18.6.2_T4_5.png，页面顶部为白色的 Safari 标签页。
主测试截图 T2_2、T4_2、T4_3a、T4_3b、T4_4、T7_sub_1、T8_1a、T4_reobs_1 至 T4_reobs_7 和 unassigned_1，位于数据包的 screenshots/ 目录（N62）。
raw/2026-10-20-ios18.6.2-step15r-t4-baseline.json 和 step16-app-t4-{fixed,sticky,safe-area}.json 读数记录几何（N25 至 N29）。

实验笔记 N25 至 N29、N46、N47、N62、N64、N65 和 N65-a 见 2026-10-ios18-baseline.md。记录见 /lab/results.json。引用时写作「OpenPWA device test, 2026-10-20, iPhone 16 Pro, iOS 18.6.2 (22G100), N65」。

局限

颜色来源的证据是截图加操作员报告（S+O），M1 至 M3 没有仪器读数。截图流程的色彩处理没有与实测显示器核对。
未测页面不声明两种颜色的情形，也未测用 media（prefers-color-scheme）限定 meta。脚本在加载后修改 meta 只有 dynamic 页面的操作员报告，深色外观也只有操作员报告（N48），两者均未测量。横屏未测。
只测了默认状态栏样式。black-translucent 会让页面画到条带下面，见 black-translucent 下的视口几何；default 与 black 没有安装。
一台 iPhone 16 Pro、一个版本、一名操作员。关于 iOS 26 和 27 的说法，例如 theme-color 在那里「没有作用」（Modern Web Weekly #80，substack.com），本次没有测试；这次测试是它们的 18.6.2 基线。

设备操作由 OpenPWA 的一名操作员在 iPhone 16 Pro 上完成。AI 代理会话通过 USB 读取页面状态、记录实验笔记并起草本文；自动门禁和 AI 事实核查做了检查。没有人逐篇审阅。

最后核验 2026-10-22

来源

openpwa.nethttps://openpwa.net/research/2026-10-ios18-home-screen-web-apps/data/
w3.orghttps://www.w3.org/TR/appmanifest/#theme_color-member
webkit.orghttps://webkit.org/blog/11989/new-webkit-features-in-safari-15/
developer.mozilla.orghttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/theme-color
github.comhttps://github.com/mdn/browser-compat-data/blob/main/html/elements/meta.json
github.comhttps://github.com/mdn/browser-compat-data/blob/main/manifests/webapp/theme_color.json
firt.devhttps://firt.dev/notes/pwa-ios/

报告问题 · 查看源文 · 变更记录

本页译自英文版。

iOS 主屏 Web 应用的状态栏颜色来源

设置不同的主题色

怎么运行

结果

来源中的主题色优先级

数据

相关参考条目

局限