# iOS 主屏 Web 应用的视口尺寸与显示模式

> 在 iOS 18.6.2 上，display 为 standalone 的主屏应用在 874 px 高的屏幕上得到 402 x 812 的视口，只匹配 display-mode standalone。

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="standalone-viewport-and-display-mode" locale="zh" />

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

在 iOS 18.6.2 上，manifest 的 `display` 设为 `standalone` 的主屏 Web 应用，会匹配哪些 `display-mode` 媒体查询？`navigator.standalone` 返回什么？与同一台 iPhone 上的 Safari 标签页相比，页面的视口占了屏幕的多少？

2026-10-20，iPhone 16 Pro、iOS 18.6.2（22G100）上的两个应用都只匹配 standalone 模式。屏幕为 402 x 874，竖屏视口占 402 x 812 CSS px。

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

## 显示模式查询与视口读数

我们测试了 OpenPWA 演示应用（`/demo/`），它的 manifest 设置 `display: standalone`，`id`、`start_url`、`scope` 都是 `/demo/`。还测了设备实验室应用（`/lab/device-tests/`，同样是 `display: standalone`）。两个页面都没有设置 `viewport-fit=cover`，也没有状态栏样式 meta。

代理在各环境中用 USB 执行只读表达式，读取这些值。

- `navigator.standalone`；
- `matchMedia('(display-mode: X)').matches` 的七个取值为 `browser`、`minimal-ui`、`standalone`、`fullscreen`、`window-controls-overlay`、`picture-in-picture` 和 `application`；
- `innerWidth` x `innerHeight`、`visualViewport` 尺寸和 `screen` 尺寸（CSS px）；
- 用探测元素测得的四个 `env(safe-area-inset-*)` 值；
- 实验室应用横屏时只读了 `navigator.standalone`、`display-mode: standalone` 查询、内部尺寸、`visualViewport` 高度、屏幕方向和四个安全区内边距。

测试环境包括 Safari 标签页（WebDriver 自动化打开四个页面，N03、N06；以及操作员平常使用的 Safari 配置，N08 至 N10），从主屏幕首次启动的演示应用（07:21:34 UTC，N13），首次启动的实验室应用（07:34:15 UTC，N18），以及转到横屏的实验室应用（08:12:01 UTC，N31）。

## 怎么运行

1. 如果主屏幕上有之前测试留下的「OpenPWA」图标，先删掉（长按 → 移除 App → 删除 App）。
2. 在 Safari 中打开 `https://openpwa.net/demo/`，页面会显示自己处在哪种显示模式。
3. 点按**分享** → **添加到主屏幕** → **添加**。
4. 打开新的 OpenPWA 图标，页面上那一行应为「Running as an installed app: display-mode: standalone (iOS navigator.standalone)」。截取页面顶部。
5. 使用网页检查器（设置 → App → Safari 浏览器 → 高级 → 网页检查器，然后 Mac Safari → **开发** → 你的 iPhone → OpenPWA 应用），在控制台运行 `['browser','minimal-ui','standalone','fullscreen','window-controls-overlay','picture-in-picture','application'].map(m => m + ':' + matchMedia('(display-mode: ' + m + ')').matches)`，再运行 `[navigator.standalone, innerWidth, innerHeight, screen.width, screen.height]`。
6. 在 Safari 标签页中打开 `https://openpwa.net/demo/`，运行同样两行作对比。
7. 也可以把应用转到横屏，再读一次 `innerWidth`、`innerHeight` 和 `screen.orientation.type`。

<LabHarnessLinks behaviour="standalone-viewport-and-display-mode" locale="zh" />

## 结果

在 iOS 18.6.2 上，演示应用的 `navigator.standalone` 为 `true`；`display-mode: standalone` 匹配，其余六个查询（包括 `fullscreen`）都不匹配。内部尺寸和 `visualViewport` 为 402 x 812 CSS px，屏幕为 402 x 874，四个安全区内边距都是 0，页面那一行显示「Running as an installed app: display-mode: standalone (iOS navigator.standalone)」（A，N13；S，截图 T2_2）。实验室应用的显示模式和尺寸相同（A，N18）。

在 Safari 标签页中，`navigator.standalone` 为 `false`，只有 `display-mode: browser` 匹配，内部尺寸 402 x 678（A，N03、N06）。

横屏时，实验室应用报告 `landscape-primary`，`display-mode: standalone` 匹配，内部尺寸为 750 x 402，内边距为 0（A，N31）；这次读数没有记录屏幕尺寸。置信标签为 A+S。

<LabResults behaviour="standalone-viewport-and-display-mode" locale="zh" />

竖屏时，874 px 的屏幕高度中有 62 CSS px 不在 812 px 的视口之内。这条区域的颜色从哪里来、页面什么时候能画到它下面，分别见[状态栏颜色来源](/zh/lab/behaviour/status-bar-colour-source/)和 [black-translucent 下的视口几何](/zh/lab/behaviour/status-bar-black-translucent-geometry/)。

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

## 显示模式规则与 BCD 备注差异

Web Application Manifest 规定，`standalone` 模式下用户代理会去掉网址栏之类的浏览器界面，但可以保留状态栏等系统界面；`fullscreen` 则「占满整个可用显示区域」（"takes up the entirety of the available display area"，[Web Application Manifest，`display` 成员](https://www.w3.org/TR/appmanifest/#display-member)，w3.org）。视口止于一条可见的状态栏下方，符合 `standalone`。MDN 对 `display-mode` 特性的描述相同（[display-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/display-mode)，MDN）。Apple 已归档的 meta 标签参考把 `window.navigator.standalone` 列为判断全屏 Web 应用模式的方法（[Supported Meta Tags](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html)，developer.apple.com）。

browser-compat-data（BCD）记录 iOS 版 Safari 自 12.2 起支持 `css.at-rules.media.display-mode`。它在 `standalone` 取值下的备注说，在 `display: standalone` 的已安装 Web 应用中，「`display-mode: standalone` 为 false，`display-mode: fullscreen` 为 true」，并引用 WebKit 缺陷 264218（[BCD css/at-rules/media.json](https://github.com/mdn/browser-compat-data/blob/main/css/at-rules/media.json)，github.com，2026-10-20 读取）。该缺陷于 2023 年针对 iOS 17 提交，状态为 NEW（[Bug 264218](https://bugs.webkit.org/show_bug.cgi?id=264218)，bugs.webkit.org）。

实测与 manifest 规范和 Apple 的参考一致，但在这个版本上与 BCD 备注不符。 iOS 18.6.2 上有两个应用声明了 `display: standalone`，两个都匹配 `standalone`、不匹配 `fullscreen`。单个版本无法说明行为从哪个版本开始变化。BCD 的其他备注在这里成立。`minimal-ui` 为 false，Safari 标签页中 `browser` 匹配。

## 数据

来自 [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-step09-app-demo.json`](/research/2026-10-ios18-home-screen-web-apps/data/raw/2026-10-20-ios18.6.2-step09-app-demo.json)，演示应用，七个 `display-mode` 值、尺寸和内边距（N13）。
- [`raw/2026-10-20-ios18.6.2-step12-app-lab.json`](/research/2026-10-ios18-home-screen-web-apps/data/raw/2026-10-20-ios18.6.2-step12-app-lab.json)，实验室应用（N18）。
- [`raw/2026-10-20-ios18.6.2-tab-demo.json`](/research/2026-10-ios18-home-screen-web-apps/data/raw/2026-10-20-ios18.6.2-tab-demo.json) 和 [`raw/2026-10-20-ios18.6.2-tab-lab.json`](/research/2026-10-ios18-home-screen-web-apps/data/raw/2026-10-20-ios18.6.2-tab-lab.json)，Safari 标签页（N03）。
- [`raw/2026-10-20-ios18.6.2-step17-app-t4-baseline-landscape.json`](/research/2026-10-ios18-home-screen-web-apps/data/raw/2026-10-20-ios18.6.2-step17-app-t4-baseline-landscape.json)，横屏的实验室应用（N31）。
- 截图 [`2026-10-20_iphone16pro_ios18.6.2_T2_2.png`](/research/2026-10-ios18-home-screen-web-apps/data/screenshots/2026-10-20_iphone16pro_ios18.6.2_T2_2.png)。

实验笔记 N03、N06、N13、N18 和 N31 见 [`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), N13」。

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

## 相关参考条目

这一结果为 iOS 版 Safari 的 `display` 与 `display-mode` 相关说法提供一台 iPhone 上的实测视口尺寸，包括 [display 清单成员](/zh/reference/manifest/display/)条目。

<LabBacks behaviour="standalone-viewport-and-display-mode" locale="zh" />

## 局限

- 一台 iPhone 16 Pro（竖屏宽 402 CSS px）、一个版本、一名操作员。没有测试其他屏幕尺寸和 iPad。
- 只测了 `display: standalone`，没有安装 `fullscreen` 或 `minimal-ui` 的 manifest。
- 62 px 是两个读数之差（屏幕高度减内部高度），不是对状态栏的直接测量。
- 横屏只有实验室应用的一次读数。应用横屏时是否显示状态栏没有确定。操作员对此的回答与其他几次回答一起，后来记为不确定（N46），横屏截图拍的是 Safari 标签页而不是应用（N63）。
- 所有读数都在浅色外观下（`prefers-color-scheme: dark` 为 false），没有测量深色外观。
- 没有在 iOS 26 及以后的版本上测试。

<LabProvenance locale="zh" />