跳转到内容
OpenPWA

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

发布于 作者 Carey Gill · 编辑流程

行为实测 2026-10-20，iPhone 16 Pro，iOS 18.6.2 (22G100)A，仪器读数与 BCD 不符

在 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。

显示模式查询与视口读数

链接到“显示模式查询与视口读数”一节

我们测试了 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。
  • T2 安装 demo 并启动（4 分钟）
    demo 页面：/demo/
  • T5 标签页与应用中的显示模式（3 分钟）
    测试页 v1：打开测试
    demo 页面：/demo/

结果

链接到“结果”一节

在 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。

2026-10-20，iOS 18.6.2

在 demo 和 PWA Lab 两个主屏应用里，只匹配 display-mode: standalone，navigator.standalone 为 true，视口 402 x 812，屏幕 402 x 874。在 Safari 标签页里只匹配 browser，视口 402 x 678。

日期
2026-10-20
设备
iPhone 16 Pro
系统版本与构建号
iOS 18.6.2 (22G100)，正式版
环境
Safari 标签页和主屏应用
结果
符合预期
关键数值
  • tabViewport: 402x678
  • appViewport: 402x812
  • screen: 402x874
  • tabDisplayMode: browser
  • appDisplayMode: standalone
  • tabNavigatorStandalone: false
  • appNavigatorStandalone: true
  • appSafeAreaInsets: 0/0/0/0
可信度
A，仪器读数
测试
T2, T5
实验笔记条目
N03, N13, N18
研究
阅读研究 · 数据包
测试页
测试页 v1
使用的测试页 v1 文件（2 个），线上字节的 SHA-256
  • /lab/device-tests/ 42c90845419f5ed3ad15d941bea04f649f4c5d350b1847292292fadd55871486
  • /lab/device-tests/manifest.webmanifest cab4e60719fd1f9c84d04aada2ad6cd937f50615ce646c3ed20f14f0ca09832b

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

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

链接到“显示模式规则与 BCD 备注差异”一节

Web Application Manifest 规定，standalone 模式下用户代理会去掉网址栏之类的浏览器界面，但可以保留状态栏等系统界面；fullscreen 则「占满整个可用显示区域」（“takes up the entirety of the available display area”，Web Application Manifest，display 成员，w3.org）。视口止于一条可见的状态栏下方，符合 standalone。MDN 对 display-mode 特性的描述相同（display-mode，MDN）。Apple 已归档的 meta 标签参考把 window.navigator.standalone 列为判断全屏 Web 应用模式的方法（Supported Meta Tags，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，github.com，2026-10-20 读取）。该缺陷于 2023 年针对 iOS 17 提交，状态为 NEW（Bug 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 数据包（CC BY 4.0）。

实验笔记 N03、N06、N13、N18 和 N31 见 2026-10-ios18-baseline.md。记录见 /lab/results.json。引用时写作「OpenPWA device test, 2026-10-20, iPhone 16 Pro, iOS 18.6.2 (22G100), N13」。

相关参考条目

链接到“相关参考条目”一节

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

参考条目

兼容性数据

局限

链接到“局限”一节
  • 一台 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 及以后的版本上测试。

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

最后核验

来源

  • openpwa.nethttps://openpwa.net/research/2026-10-ios18-home-screen-web-apps/data/
  • w3.orghttps://www.w3.org/TR/appmanifest/#display-member
  • developer.mozilla.orghttps://developer.mozilla.org/en-US/docs/Web/CSS/@media/display-mode
  • github.comhttps://github.com/mdn/browser-compat-data/blob/main/css/at-rules/media.json
  • bugs.webkit.orghttps://bugs.webkit.org/show_bug.cgi?id=264218
  • developer.apple.comhttps://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

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

本页译自英文版。

© 2026 OpenPWA · 文字 CC BY-SA 4.0 · 数据 CC BY 4.0隐私 · RSS · 变更记录订阅