# iPhone Duo 与 iOS 27.1 对 Web 应用意味着什么

> iPhone Duo 于 2026-10-23 随 iOS 27.1 开售。Safari 27 给 Web 应用带来了什么，27.1 在公开记录里是什么样，哪些情况还没有经过实测。

Apple 的第一款折叠屏 iPhone，iPhone Duo，将于 2026 年 10 月 23 日在首批国家和地区开售。Apple
的发布稿写明，“iPhone Duo will be available with iOS 27.1”，即这台设备随 iOS 27.1 一起提供
（[Apple unveils iPhone Duo](https://www.apple.com/newsroom/2026/09/apple-unveils-iphone-duo/)，apple.com）。
browser-compat-data 把 2026 年 9 月 14 日发布的 iOS 版 Safari 27 记为当前版本；Apple 为 Safari 27.0
写的发布说明里，记录了对 Service Worker 静态路由 API 的支持，以及两项 Service Worker 注册修复
（[BCD browsers/safari_ios.json](https://github.com/mdn/browser-compat-data/blob/main/browsers/safari_ios.json)，github.com；
[Safari 27 Release Notes](https://developer.apple.com/documentation/safari-release-notes/safari-27-release-notes)，developer.apple.com）。
Apple 的 Safari 发布说明目录和 browser-compat-data 都没有列出 Safari 27.1 这个版本；Web 应用在这台设备
的两块屏幕之间表现如何，尚无实测结果。

<span id="2026-年-9-月-9-日的发布稿说了什么"></span>

## 双屏设计与发售安排

Apple 在 2026 年 9 月 9 日发布这台设备时，描述了两块屏幕，展开时是 7.6 英寸的内屏，合上时是 5.4 英寸
的外屏。发布稿的原话是，两块屏幕的宽高比相同，所以内容会按比例缩放（“both displays share the same
aspect ratio, so content scales proportionally”）
（[Apple unveils iPhone Duo](https://www.apple.com/newsroom/2026/09/apple-unveils-iphone-duo/)，apple.com）。

同一份发布稿还介绍了内屏上的多任务。用户可以用分屏浏览（Split View）把两个 App 左右并排打开；发布稿
举的例子里，Safari 可以同时开两个窗口，用来比价购物。预购从 2026 年 10 月 16 日开始，首批国家和地区
从 10 月 23 日开始供货，另有 28 个国家和地区从 10 月 30 日开始供货
（[Apple unveils iPhone Duo](https://www.apple.com/newsroom/2026/09/apple-unveils-iphone-duo/)，apple.com）。

## Apple 对 App Store 开发者的要求

2026 年 10 月 5 日，Apple Developer News 发布了《Prepare and submit your apps for iPhone Duo》。这份通知
建议开发者用 Xcode 27.1 重新编译现有 App，因为该版本加入了对 iPhone Duo 的开发支持；它还建议用 Device
Hub 查看 App 在 iPhone Duo 各种姿态和朝向下的表现
（[Prepare and submit your apps for iPhone Duo](https://developer.apple.com/news/?id=kkphp5qo)，developer.apple.com）。

通知同时给 App Store 产品页定了时间表。新的截图与 App 预览规格已经覆盖 iPhone Duo；提交了 iPhone Duo
截图的 App，产品页上会显示一个标记；从 2027 年 4 月起，所有提交的 App 和游戏都必须包含 iPhone Duo
截图（“any apps or games submitted will need to include screenshots for iPhone Duo”）
（[Prepare and submit your apps for iPhone Duo](https://developer.apple.com/news/?id=kkphp5qo)，developer.apple.com）。

## iOS 27 已经给 Web 应用带来了什么

Apple 的 Safari 27 发布说明把发布日期写为 2026 年 9 月 14 日，版本号是 27.0（20625.1.29），并写明 Safari 27
可用于 iOS 27、iPadOS 27、visionOS 27 和 macOS。说明里有一条“Added support for the service worker
static routing API”，即新增了 Service Worker 静态路由 API。同一份说明还修复了两种注册清理问题。主脚本缺失或
读取已存储的导入脚本失败时，系统会注销相应的 Service Worker 注册
（[Safari 27 Release Notes](https://developer.apple.com/documentation/safari-release-notes/safari-27-release-notes)，developer.apple.com）。

WebKit 为这一版写的特性文章说明了静态路由 API 的行为。Service Worker 可以声明路由规则，浏览器据此让某些
请求完全绕过 Service Worker，从而为高性能 PWA 减少开销
（[WebKit Features for Safari 27.0](https://webkit.org/blog/18325/webkit-features-for-safari-27-0/)，webkit.org）。

## `addRoutes()` 的工作方式

注册这些规则的方法是 `InstallEvent.addRoutes()`。MDN 的说明是，它指定一条或多条静态路由，这些规则用于
获取指定资源，而且在 Service Worker 启动之前就会生效。MDN 解释，某些资源总要从网络或浏览器的
`Cache` 获取时，就绕过 Service Worker，省去不必要的 Service Worker 运行开销
（[InstallEvent: addRoutes() method](https://developer.mozilla.org/en-US/docs/Web/API/InstallEvent/addRoutes)，developer.mozilla.org）。

每条规则由一个 `condition` 和一个 `source` 组成。MDN 列出的条件属性有 `urlPattern`、`requestMethod`、
`requestMode`、`requestDestination` 和 `runningStatus`，另有 `not` 与 `or` 用来组合条件。`source` 可以是
`"network"`、`"cache"`、`"fetch-event"` 或 `"race-network-and-fetch-handler"`，也可以是一个用 `cacheName`
指定某个 Cache 的对象。`urlPattern` 条件接受 `URLPattern` 实例或构造函数的输入；MDN 特别说明，
其中不允许使用正则表达式的捕获组
（[InstallEvent: addRoutes() method](https://developer.mozilla.org/en-US/docs/Web/API/InstallEvent/addRoutes)，developer.mozilla.org）。

MDN 逐一解释了来源。`"cache"` 从浏览器的 Cache 读取匹配的资源；`"fetch-event"` 把请求交给
Service Worker 的 `fetch` 处理函数；`"network"` 直接从网络加载。`"race-network-and-fetch-handler"`
会同时向网络和 `fetch` 处理函数发出请求，谁先完成就用谁的结果。MDN 还提到，`"fetch-event"` 可以和
`runningStatus` 条件搭配使用。Service Worker 正在运行时由它返回资源，没有运行时改走网络路由
（[InstallEvent: addRoutes() method](https://developer.mozilla.org/en-US/docs/Web/API/InstallEvent/addRoutes)，developer.mozilla.org）。

MDN 也写明了出错的情形。规则无效时，规则以 `"fetch-event"` 为来源而 Service Worker 没有 `fetch`
处理函数时，或者 `or` 与其他类型的条件混用时，`addRoutes()` 会抛出 `TypeError`。MDN 的第一个示例是，在
Service Worker 没有运行时，把以 `/articles` 开头的 URL 交给网络处理
（[InstallEvent: addRoutes() method](https://developer.mozilla.org/en-US/docs/Web/API/InstallEvent/addRoutes)，developer.mozilla.org）。

browser-compat-data 对 `api.InstallEvent.addRoutes` 记录，Safari 27 与 iOS 版 Safari 27 起支持，
Chrome 123 与 Android 版 Chrome 123 起支持；Firefox 与 Android 版 Firefox 记为不支持，实现进度链接到
Bugzilla 的 1855580 号 bug
（[BCD api/InstallEvent.json](https://github.com/mdn/browser-compat-data/blob/main/api/InstallEvent.json)，github.com）。

Safari 27 的说明里还修复了路由功能本身的两个问题。一是没有设置 `fetch` 事件处理函数时，Service Worker
路由无法匹配的问题；二是静态路由规则没有按规范要求执行限制检查的问题
（[Safari 27 Release Notes](https://developer.apple.com/documentation/safari-release-notes/safari-27-release-notes)，developer.apple.com）。

## 公开记录里的 iOS 27.1

2026 年 10 月 20 日查阅时，Apple 的 Safari 发布说明目录在版本 27 下列出的是《Safari 27 Release Notes》和
《Safari 27.2 Beta Release Notes》，没有 Safari 27.1 的说明
（[Safari release notes](https://developer.apple.com/documentation/safari-release-notes)，developer.apple.com）。

browser-compat-data 在 27 系列里列出两个 iOS 版 Safari 版本，分别为27，状态为 `current`，发布日期 2026 年
9 月 14 日；27.2，状态为 `beta`。其中没有 27.1
（[BCD browsers/safari_ios.json](https://github.com/mdn/browser-compat-data/blob/main/browsers/safari_ios.json)，github.com）。

### Safari 没有列出的折叠屏 API

Web 平台本身有面向这类屏幕的 API。MDN 的说明是，Viewport Segments API 让开发者可以用 CSS 和 JavaScript
获取视口中各个逻辑上独立的片段的位置与尺寸；当视口被折痕、两块屏幕之间的铰链这类硬件结构分开时，
就会形成这些片段
（[Viewport Segments API](https://developer.mozilla.org/en-US/docs/Web/API/Viewport_segments_API)，developer.mozilla.org）。

这个 API 在 CSS 一侧的功能里，有 `horizontal-viewport-segments` 和 `vertical-viewport-segments` 两个媒体特性。MDN 对 `horizontal-viewport-segments` 的描述是，检测设备是否有指定数量
的、水平并排排列的视口片段。按 MDN 的说明，折叠屏设备完全展开或合上（处于连续姿态）时取值为 1；
折叠屏设备处于折叠状态、且朝向使两个片段左右并排时，取值为 2
（[horizontal-viewport-segments](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/horizontal-viewport-segments)，developer.mozilla.org）。

browser-compat-data 记录 `api.Viewport.segments` 从 Chrome 138 与 Android 版 Chrome 138 起支持，Safari、
iOS 版 Safari、Firefox 与 Android 版 Firefox 均记为不支持
（[BCD api/Viewport.json](https://github.com/mdn/browser-compat-data/blob/main/api/Viewport.json)，github.com）。
对这两个媒体特性，browser-compat-data 记录 Chrome 138 起支持，Safari 与 Firefox 记为不支持，iOS 版 Safari
与 Android 版 Firefox 的条目沿用这两条记录
（[BCD css/at-rules/media.json](https://github.com/mdn/browser-compat-data/blob/main/css/at-rules/media.json)，github.com）。
MDN 把这个 API 标为实验性功能，且不属于 Baseline
（[Viewport Segments API](https://developer.mozilla.org/en-US/docs/Web/API/Viewport_segments_API)，developer.mozilla.org）。

### 27.1 之后的版本

Apple 开发者网站的发布页列出了 2026 年 10 月 19 日的 iOS 27.2 RC（24B115）
（[Releases](https://developer.apple.com/news/releases/)，developer.apple.com）。Safari 27.2 Beta 发布说明
的日期是 2026 年 10 月 13 日，版本号为 27.2 beta（20625.2.8）
（[Safari 27.2 Beta Release Notes](https://developer.apple.com/documentation/safari-release-notes/safari-27_2-release-notes)，developer.apple.com）。

<span id="对-pwa-开发者为什么重要"></span>

## 双屏适配对 Web 应用的意义

不碰真机也能着手的，是 Service Worker 这部分变化。browser-compat-data 里 `addRoutes()` 在 iOS 版
Safari 上的支持从 27 开始，与 Chrome 123 并列，Firefox 没有支持记录
（[BCD api/InstallEvent.json](https://github.com/mdn/browser-compat-data/blob/main/api/InstallEvent.json)，github.com）。
以 `"fetch-event"` 为来源的规则，在没有 `fetch` 处理函数的 Service Worker 里会抛出 `TypeError`；而在
同样没有处理函数的情形下路由无法匹配的问题，Safari 27.0 也做了修复
（[InstallEvent: addRoutes() method](https://developer.mozilla.org/en-US/docs/Web/API/InstallEvent/addRoutes)，developer.mozilla.org；
[Safari 27 Release Notes](https://developer.apple.com/documentation/safari-release-notes/safari-27-release-notes)，developer.apple.com）。

两项注册修复针对的是已部署 Service Worker 的故障状态。按 Apple 的说明，主脚本缺失的注册，以及已存储的
导入脚本无法读取的注册，都会被注销
（[Safari 27 Release Notes](https://developer.apple.com/documentation/safari-release-notes/safari-27-release-notes)，developer.apple.com）。

布局方面，Apple 说两块屏幕宽高比相同，Safari 在分屏浏览中可以开两个窗口
（[Apple unveils iPhone Duo](https://www.apple.com/newsroom/2026/09/apple-unveils-iphone-duo/)，apple.com）。
browser-compat-data 没有给 iOS 版 Safari 记录 `viewport.segments` 的支持，也没有记录那两个片段媒体特性的
支持，所以基于它们写的折叠布局，在 Safari 上没有支持记录
（[BCD api/Viewport.json](https://github.com/mdn/browser-compat-data/blob/main/api/Viewport.json)，github.com；
[BCD css/at-rules/media.json](https://github.com/mdn/browser-compat-data/blob/main/css/at-rules/media.json)，github.com）。

如果团队同时通过 App Store 发布，按 Apple 的原话，2027 年 4 月的截图要求适用于“any apps or games
submitted”，即所有提交的 App 和游戏
（[Prepare and submit your apps for iPhone Duo](https://developer.apple.com/news/?id=kkphp5qo)，developer.apple.com）。

## 站内相关条目

- [按版本看 iOS 上的 PWA：iOS 27](/zh/reference/platforms/ios-by-version/#ios-27)：iOS 27 的日期记录及其来源见此条目。
- [按版本看 iOS 上的 PWA：iPhone Duo 上的 iOS 27.1](/zh/reference/platforms/ios-by-version/#ios-27-1)：iOS 27.1 的记录与 Viewport Segments 数据见此条目。
- [Service Worker 静态路由 API](/zh/reference/service-worker/static-routing/)：`addRoutes()` 的规则写法见此条目。
- [iOS 与 Safari 上的 PWA](/zh/reference/platforms/ios-safari/)：在 iOS 上安装和运行 Web 应用的内容见此条目。
- [Service Worker 浏览器支持](/zh/compatibility/service-worker/)：按浏览器和版本整理的 Service Worker 支持情况见此条目。

## 待核实

- iPhone Duo 尚无这组真机测试结果。Safari 与主屏幕 Web 应用在内屏、外屏上如何布局，页面打开期间折叠或展开时又会怎样，尚未确认。
- 主屏幕 Web 应用能否在 iPhone Duo 上参与分屏浏览，尚未确认。
- 各种分屏组合下页面拿到的视口宽度，尚未确认。
- iOS 27.1 中的 WebKit 与 iOS 27.0 中的 WebKit 是否有差别，尚未确认。
- Safari 是否会支持 Viewport Segments API、在哪个版本支持，尚未确认。
- Safari 27.2 正式版最终包含哪些内容，尚未确认；2026 年 10 月 20 日查阅时，Apple 为它发布的是测试版发布说明。
- 2027 年 4 月的截图要求在生效前是否会调整，尚未确认。

## 参考来源

- [Apple unveils iPhone Duo](https://www.apple.com/newsroom/2026/09/apple-unveils-iphone-duo/)（apple.com）
- [Prepare and submit your apps for iPhone Duo](https://developer.apple.com/news/?id=kkphp5qo)（developer.apple.com）
- [Safari 27 Release Notes](https://developer.apple.com/documentation/safari-release-notes/safari-27-release-notes)（developer.apple.com）
- [Safari release notes](https://developer.apple.com/documentation/safari-release-notes)（developer.apple.com）
- [Safari 27.2 Beta Release Notes](https://developer.apple.com/documentation/safari-release-notes/safari-27_2-release-notes)（developer.apple.com）
- [Releases](https://developer.apple.com/news/releases/)（developer.apple.com）
- [WebKit Features for Safari 27.0](https://webkit.org/blog/18325/webkit-features-for-safari-27-0/)（webkit.org）
- [InstallEvent: addRoutes() method](https://developer.mozilla.org/en-US/docs/Web/API/InstallEvent/addRoutes)（developer.mozilla.org）
- [Viewport Segments API](https://developer.mozilla.org/en-US/docs/Web/API/Viewport_segments_API)（developer.mozilla.org）
- [horizontal-viewport-segments](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/horizontal-viewport-segments)（developer.mozilla.org）
- [browser-compat-data：api/InstallEvent.json](https://github.com/mdn/browser-compat-data/blob/main/api/InstallEvent.json)（github.com）
- [browser-compat-data：api/Viewport.json](https://github.com/mdn/browser-compat-data/blob/main/api/Viewport.json)（github.com）
- [browser-compat-data：browsers/safari_ios.json](https://github.com/mdn/browser-compat-data/blob/main/browsers/safari_ios.json)（github.com）
- [browser-compat-data：css/at-rules/media.json](https://github.com/mdn/browser-compat-data/blob/main/css/at-rules/media.json)（github.com）