行为 · 实测 2026-10-20，iPhone 16 Pro，iOS 18.6.2 (22G100) · A，仪器读数 · 与 Apple 一致
设置 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 和 viewport-fit=cover 后，iOS 18.6.2 的主屏 Web 应用会不会把页面画到状态栏下面？与默认样式相比，页面看到的视口尺寸和 env(safe-area-inset-*) 是多少？
black-translucent 与 viewport-fit=cover 一起使用时，应用视口为 402 x 874，顶部安全区内边距为 62 px。读数取自 2026-10-20 的 iPhone 16 Pro、iOS 18.6.2（22G100）。
页面 /lab/device-tests/t4/sbs-black-translucent/ 从 Safari 安装为独立应用「SBS transl」（自己的 manifest，display: standalone）。它声明 apple-mobile-web-app-status-bar-style: black-translucent，视口为 width=device-width, initial-scale=1, viewport-fit=cover，theme-color 为 #161616，页面顶部有静态蓝色（#0f62fe）页头，高 56 px，没有安全区内边距。
应用在前台时，代理用 USB 读取页面（09:31:04 UTC，N55），记录 innerWidth 和 innerHeight，用探测元素测量四个安全区内边距，同时读取解析后的状态栏样式和视口 meta、视口顶部元素与颜色，以及 prefers-color-scheme。两组对照读取的是同类读数。
- PWA Lab 应用中的默认状态栏样式（没有 meta），即 baseline、fixed、sticky 和 safe-area 四个变体，其中 safe-area 还设置了
viewport-fit=cover（N25 至 N29）；
- 同一个
black-translucent 页面在 Safari 标签页中（N51）。
- 在 Safari 中打开
https://openpwa.net/lab/device-tests/t4/sbs-black-translucent/，然后分享 → 添加到主屏幕 → 添加。
- 从图标打开「SBS transl」，停在页面顶部。页面会打印自己的探测块，但内边距要用第 3 步的控制台代码读取。启动时，页面可能在内边距生效前就计算了
safe-area-inset-top 并打印（报告中的异常 A11）。
- 使用网页检查器（Mac Safari → 开发 → 你的 iPhone → 该应用），运行
const p = document.createElement('div'); p.style.cssText = 'position:fixed;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)'; document.body.append(p); [innerWidth, innerHeight, getComputedStyle(p).paddingTop, getComputedStyle(p).paddingBottom]。
- 没有网页检查器时，目测蓝色页头是否位于时间和电量后面，并截图。
- 再做对照，把
https://openpwa.net/lab/device-tests/ 作为主屏应用打开，在 T4 表格中打开 safe-area 变体，运行同一行代码。
- 也可以在 Safari 标签页中打开
sbs-black-translucent 网址，运行同一行代码。
在 iOS 18.6.2 上，black-translucent 应用占满了屏幕。standalone 为 true，内部尺寸 402 x 874，safe-area-inset-top 为 62 px，右 0，底部 34 px，左 0，蓝色页头位于顶部 0 处，视口顶部的颜色为 rgb(15, 98, 254)（A，N55）。
默认样式下视口要往下 62 px 才开始，每个变体的内部高度都是 812/874，顶部内边距为 0，viewport-fit=cover 只把底部内边距变成 34 px（A，N25 至 N29）。
在 Safari 标签页中，同一个 black-translucent 页面读数为 402 x 678，内边距全为 0（A，N51）。置信标签为 A。操作员报告看到蓝色页头位于白色状态栏文字后面（O）；这个应用没有交付截图。
2026-10-20，iOS 18.6.2
在 SBS transl 应用里（black-translucent 加 viewport-fit=cover），视口是完整的 402 x 874 屏幕，顶部安全区内边距 62 px、底部 34 px，页面画到了状态栏下面。页面自己较早计算的探针文字显示顶部内边距为 0 px（异常 A11）。
- 日期
- 2026-10-20
- 设备
- iPhone 16 Pro
- 系统版本与构建号
- iOS 18.6.2 (22G100)，正式版
- 环境
- 主屏应用
- 结果
- 符合预期
- 关键数值
statusBarStyle: black-translucentviewportFit: coverinnerWidth: 402innerHeight: 874safeAreaInsetTopPx: 62safeAreaInsetBottomPx: 34
- 可信度
- A，仪器读数
- 测试
- T4b
- 实验笔记条目
- N55
- 研究
- 阅读研究 · 数据包
- 测试页
- 测试页 v1
使用的测试页 v1 文件（3 个），线上字节的 SHA-256
/lab/device-tests/t4/sbs-black-translucent/ 23ae90d26998f2e5c2a1e8cbbead40181405a3620fa00d2228fea6fccde6f426/lab/device-tests/t4/sbs-black-translucent/manifest.webmanifest 08dd85589f951a32aff8f1542664a7bbeffe1455fcdcfdf07e985ecb3e01e379/lab/device-tests/icons/ati-180.png 08d9c8fa268662b4c67f5d96ffa1fa508cfd2c3f3048e550f498c02dca82e8ef
| 页面 |
status-bar-style |
viewport-fit |
内部尺寸 |
顶部 / 底部内边距 |
笔记 |
| baseline、fixed、sticky（应用） |
无 |
未设置 |
402 x 812 |
0 / 0 |
N25、N26、N28 |
| safe-area（应用） |
无 |
cover |
402 x 812 |
0 / 34 |
N29 |
| SBS transl（应用） |
black-translucent |
cover |
402 x 874 |
62 / 34 |
N55 |
| SBS transl（Safari 标签页） |
black-translucent |
cover |
402 x 678 |
0 / 0 |
N51 |
Apple 已归档的 meta 标签参考说，这个标签只有先指定全屏模式才起作用；取 default 或 black 时网页内容显示在状态栏下方，取 black-translucent 时网页内容显示在整个屏幕上，状态栏遮住其中一部分（Supported Meta Tags，developer.apple.com）。Firtman 的笔记说，iOS 15 起 theme-color meta 取代了这个标签，但保留 black-translucent，称它仍是得到全屏应用的唯一办法（“Still the only way to get a fullscreen app”，iOS PWA Compatibility，firt.dev）。内边距来自 safe-area-inset-* 环境变量，从视口的各边量起（CSS Environment Variables，csswg.org）；viewport-fit=cover 把视口设为外接整个屏幕的矩形（CSS Round Display，viewport-fit，csswg.org）。本次只测了 black-translucent 与 viewport-fit=cover 同时使用的情形。
仪器读数与 Apple 的归档文本和 Firtman 的笔记一致。在应用中页面画满整个屏幕，62 px 的顶部内边距告诉页面状态栏的位置；而同一页面在 Safari 标签页中既没有全高视口，也没有任何内边距。默认样式的读数补上了来源没写的一点。没有 black-translucent 时，viewport-fit=cover 不会移动视口顶边。Apple 所说的「黑色半透明」是状态栏的外观，除操作员的报告外没有测量。本次测试把它算作带实测数值的确认，不算新发现。
来自 iOS 18.6.2 数据包（CC BY 4.0）。
实验笔记 N25 至 N29、N50-a、N51 和 N55 见 2026-10-ios18-baseline.md。记录见 /lab/results.json。引用时写作「OpenPWA device test, 2026-10-20, iPhone 16 Pro, iOS 18.6.2 (22G100), N55」。
实测确认，在 iOS 18 上，black-translucent 加 viewport-fit=cover 仍能得到全高页面，并提供可用于留白的顶部内边距。
- 应用只有一次仪器读数（N55），没有截图（T4b_1 至 T4b_3 没有交付）。白色状态栏文字和时间后面的页头依据操作员的报告。
- 页面自己的探测块打印
safe-area-inset-top: 0px，而同一时刻代理读到 62 px；innerHeight 为 874 支持 62 px，原因（探测块在内边距生效前算出）未经验证（异常 A11）。
default 和 black 没有作为独立应用安装，也没有测试不带 viewport-fit=cover 的 black-translucent。- 只测了竖屏和浅色外观，没有报告内容滚到状态栏下面时的情形。
- 一台 iPhone 16 Pro、一个版本、一名操作员。关于这个标签在 iOS 27 上不再起作用的说法（Modern Web Weekly #80，substack.com）没有测试；这次测试是它的 18.6.2 基线。
设备操作由 OpenPWA 的一名操作员在 iPhone 16 Pro 上完成。AI 代理会话通过 USB 读取页面状态、记录实验笔记并起草本文；自动门禁和 AI 事实核查做了检查。没有人逐篇审阅。
