# black-translucent 下 iOS 主屏 Web 应用的视口几何

> 在 iOS 18.6.2 上，black-translucent 加 viewport-fit=cover 让主屏应用得到 402 x 874 的视口，顶部安全区为 62 px。

import LabEvidenceLine from '@components/lab/LabEvidenceLine.astro';
import LabHarnessLinks from '@components/lab/LabHarnessLinks.astro';
import LabResults from '@components/lab/LabResults.astro';
import LabBacks from '@components/lab/LabBacks.astro';
import LabProvenance from '@components/lab/LabProvenance.astro';

<LabEvidenceLine behaviour="status-bar-black-translucent-geometry" locale="zh" />

<span id="问题"></span>

设置 `<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）。

<span id="测了什么"></span>

## 状态栏样式与安全区读数

页面 `/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）。

## 怎么运行

1. 在 Safari 中打开 `https://openpwa.net/lab/device-tests/t4/sbs-black-translucent/`，然后**分享** → **添加到主屏幕** → **添加**。
2. 从图标打开「SBS transl」，停在页面顶部。页面会打印自己的探测块，但内边距要用第 3 步的控制台代码读取。启动时，页面可能在内边距生效前就计算了 `safe-area-inset-top` 并打印（报告中的异常 A11）。
3. 使用网页检查器（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]`。
4. 没有网页检查器时，目测蓝色页头是否位于时间和电量后面，并截图。
5. 再做对照，把 `https://openpwa.net/lab/device-tests/` 作为主屏应用打开，在 T4 表格中打开 **safe-area** 变体，运行同一行代码。
6. 也可以在 Safari 标签页中打开 `sbs-black-translucent` 网址，运行同一行代码。

<LabHarnessLinks behaviour="status-bar-black-translucent-geometry" locale="zh" />

## 结果

在 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）；这个应用没有交付截图。

<LabResults behaviour="status-bar-black-translucent-geometry" locale="zh" />

| 页面 | 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 |

:::caution
本次没有安装 `apple-mobile-web-app-status-bar-style` 取 `default` 或 `black` 的两个应用，操作员早先关于它们的回答（「全黑」）已作废（N50-a）。
:::

<span id="文档怎么说"></span>

## 全屏内容与安全区规则

Apple 已归档的 meta 标签参考说，这个标签只有先指定全屏模式才起作用；取 `default` 或 `black` 时网页内容显示在状态栏下方，取 `black-translucent` 时网页内容显示在整个屏幕上，状态栏遮住其中一部分（[Supported Meta Tags](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html)，developer.apple.com）。Firtman 的笔记说，iOS 15 起 `theme-color` meta 取代了这个标签，但保留 `black-translucent`，称它仍是得到全屏应用的唯一办法（"Still the only way to get a fullscreen app"，[iOS PWA Compatibility](https://firt.dev/notes/pwa-ios/)，firt.dev）。内边距来自 `safe-area-inset-*` 环境变量，从视口的各边量起（[CSS Environment Variables](https://drafts.csswg.org/css-env-1/#safe-area-insets)，csswg.org）；`viewport-fit=cover` 把视口设为外接整个屏幕的矩形（[CSS Round Display，`viewport-fit`](https://drafts.csswg.org/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 数据包](/zh/research/2026-10-ios18-home-screen-web-apps/data/)（CC BY 4.0）。

- [`raw/2026-10-20-ios18.6.2-N55-app-sbs-transl.json`](/research/2026-10-ios18-home-screen-web-apps/data/raw/2026-10-20-ios18.6.2-N55-app-sbs-transl.json) 及其 `.meta.json`，应用读数（N55）。
- [`raw/2026-10-20-ios18.6.2-N51-tab-sbs-transl.json`](/research/2026-10-ios18-home-screen-web-apps/data/raw/2026-10-20-ios18.6.2-N51-tab-sbs-transl.json)，Safari 标签页读数（N51）。
- [`raw/2026-10-20-ios18.6.2-step15r-t4-baseline.json`](/research/2026-10-ios18-home-screen-web-apps/data/raw/2026-10-20-ios18.6.2-step15r-t4-baseline.json)、[`raw/2026-10-20-ios18.6.2-step16-app-t4-fixed.json`](/research/2026-10-ios18-home-screen-web-apps/data/raw/2026-10-20-ios18.6.2-step16-app-t4-fixed.json)、[`raw/2026-10-20-ios18.6.2-step16-app-t4-sticky.json`](/research/2026-10-ios18-home-screen-web-apps/data/raw/2026-10-20-ios18.6.2-step16-app-t4-sticky.json) 和 [`raw/2026-10-20-ios18.6.2-step16-app-t4-safe-area.json`](/research/2026-10-ios18-home-screen-web-apps/data/raw/2026-10-20-ios18.6.2-step16-app-t4-safe-area.json)，默认样式对照（N25 至 N29）。
- 截图 [`2026-10-20_iphone16pro_ios18.6.2_T4_4.png`](/research/2026-10-ios18-home-screen-web-apps/data/screenshots/2026-10-20_iphone16pro_ios18.6.2_T4_4.png)，safe-area 变体，页头位于条带下方。

实验笔记 N25 至 N29、N50-a、N51 和 N55 见 [`2026-10-ios18-baseline.md`](/research/2026-10-ios18-home-screen-web-apps/data/2026-10-ios18-baseline.md)。记录见 [`/lab/results.json`](/lab/results.json)。引用时写作「OpenPWA device test, 2026-10-20, iPhone 16 Pro, iOS 18.6.2 (22G100), N55」。

<span id="支撑的条目"></span>

## 相关参考条目

实测确认，在 iOS 18 上，`black-translucent` 加 `viewport-fit=cover` 仍能得到全高页面，并提供可用于留白的顶部内边距。

<LabBacks behaviour="status-bar-black-translucent-geometry" locale="zh" />

## 局限

- 应用只有一次仪器读数（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](https://modernwebweekly.substack.com/p/so-whats-up-with-the-ios27-blur)，substack.com）没有测试；这次测试是它的 18.6.2 基线。

<LabProvenance locale="zh" />