Safari 27.1 的 WebKit 新特性
内容提要
Safari 27.1随iPhone Duo发布，其WebKit引擎与其他iPhone一致，网站无需特殊适配。设备折叠成书状时PDF自动双页显示。新增设备姿态API和视口分段API（需开启功能标志），支持折叠屏布局设计。视口宽度为382至951 CSS像素，建议采用响应式设计而非UA嗅探，可用Xcode模拟器测试。
延伸解读
折叠屏适配：响应式设计仍是首选
文章强调，iPhone Duo 的 Safari 27.1 与其他 iPhone 使用相同的 WebKit 引擎，网站无需特殊适配。视口宽度在 382 至 951 CSS 像素之间变化，开发者应依赖媒体查询和弹性布局等响应式技术，而非针对特定设备做 UA 嗅探。文章建议使用特性检测，并可通过 Xcode 27.1 的模拟器测试，这能确保项目在未来各种屏幕尺寸上都能正常工作。
两个新 API 处于开发者预览阶段
Device Posture API 和 Viewport Segments API 在 Safari 27.1 中作为开发者预览，需在设置中开启功能标志。前者通过 CSS 媒体查询或 JavaScript 告知设备是否处于折叠状态；后者描述折叠两侧的屏幕分段，并提供环境变量和 DOMRect 数组来精确布局。文章明确表示这两个 API 仍在演进中，并邀请开发者反馈意见，因此目前不宜用于生产环境。
外屏控制区暂未开放给网页内容
iPhone Duo 外屏更宽更矮，iOS 将控件移到侧边以节省垂直空间。目前 Safari 27.1 不会让网页内容延伸到控件后方，仅用页面背景色填充该区域。文章透露 WebKit 团队正在研究更稳妥的方案，让开发者能利用这块空间，但尚未确定具体实现方式，并担心现有网站对安全区域的处理不够完善。
Q&A
iPhone Duo 上的 Safari 27.1 和其他 iPhone 的 WebKit 引擎一样吗？网站需要专门适配吗？
一样。Safari 27.1 使用与其他 iPhone 相同的 WebKit 引擎和 Web 技术，网站和 Web 应用在 iPhone Duo 上的表现与其他 iPhone 一致，无需特殊适配。
iPhone Duo 折叠成书状时，Safari 对 PDF 显示有什么特殊处理？
当用户将 iPhone Duo 部分折叠（像书一样）并查看网页 PDF 时，Safari 27.1 会自动以双页并排显示 PDF；当屏幕展开或完全闭合时，恢复为单页显示。
Safari 27.1 在 iPhone Duo 上提供了哪些折叠屏相关的 Web API？如何启用？
提供了 Device Posture API 和 Viewport Segments API 的开发者预览版，需在“设置 > 应用 > Safari > 高级 > 功能标志”中开启“Device Posture API”和“Viewport Segments API”两个标志。
iPhone Duo 的视口尺寸范围是多少？开发者应如何适配？
视口宽度范围为 382 至 951 CSS 像素，高度范围为 368 至 902 CSS 像素。建议采用响应式 Web 设计技术（如媒体查询、CSS Grid、Flexbox）而非 UA 嗅探，并使用特性检测，以确保布局适应各种屏幕尺寸。
没有 iPhone Duo 真机，如何测试网站在该设备上的显示效果？
可以下载 Xcode 27.1 或更高版本，使用其中的 Device Hub 创建并运行 iPhone Duo 模拟器进行测试。
Device Posture API 如何通过 CSS 和 JavaScript 检测设备折叠状态？
CSS 中可使用 device-posture 媒体查询（如 @media (device-posture: folded)）应用样式；JavaScript 中可通过 navigator.devicePosture.type 读取当前姿态（folded 或 continuous），并监听 change 事件。
Viewport Segments API 提供了哪些媒体查询和环境变量来布局折叠屏？
提供 horizontal-viewport-segments 和 vertical-viewport-segments 媒体查询，以及六个环境变量（viewport-segment-width、height、top、right、bottom、left），每个变量接受两个索引（列、行，从 0 开始）来精确定位每个分段。
