BeFor Web
为网而生 - 关注互联网及移动端产品的用户体验设计 - Since 2011

官方资源更新:三步适配 iPhone Duo

官方资源更新:三步适配 iPhone Duo

Apple Developer 官网发布了新的 iPhone Duo 适配指南文章“Three steps to make your app shine on iPhone Duo”,聚焦于界面布局适配及 App Store 呈现。如引言所述:

采用 iOS 27 及更高版本 SDK 构建的 app 能够在 iPhone Duo 上实现动态尺寸自适应:展开设备,app 即可延展铺满内屏;折叠设备,app 则回到外屏呈现。硬编码屏幕尺寸、锁定单一方向或对设备形态的固化假设均会破坏界面布局,导致内容出现拉伸、裁切或位置错乱。遵循以下步骤,让你的 app 全面就绪 iPhone Duo。

现将要点梳理如下。建议完整阅读原文。

前置说明

现有 app 可在 iPhone Duo 上运行,但使用最新 SDK 构建 app 才能充分利用屏幕空间并在不同形态之间实现自适应。SDK 版本决定了 app 在内外屏的实际呈现效果。

iOS 26 SDK

App 可运行,但无法自适应屏幕空间。内屏时,app 居中显示在屏幕中央;外屏时,显示在状态栏与摄像头的左侧区域。

iOS 27 SDK

App 仍会避让边缘区域,但会填满剩余空间。

iOS 27.1 及更高版本 SDK

实现全屏显示的完全态,Toolbar 和 Tab bar 会自动以垂直形态呈现在边缘区域。

适配步骤 1:运行 skill 进行自适应检测

在 Xcode 中使用 coding assistant 指令“get my app ready for iPhone Duo”自动扫描可能存在问题的布局模式。对于其他 coding agent,通过终端将该 skill 导出使用。

另建议参照“步骤 2”的问题清单进行人工检查。

适配步骤 2:修复存在问题的布局模式

避免基于 main screen 计算尺寸

  • 基于 view 或 window 计算尺寸。
  • 随时读取尺寸的变化。
  • 从 trait collection 获取缩放比例。
  • 基于 scene 创建窗口。
  • 避免持久存储 UIScreen。
  • 避免依赖屏幕旋转方向确定布局

iPhone Duo 的物理旋转方向不能代表 app 当前的形态。要判断当前是否处于宽屏状态,请直接对比可用空间的宽度与高度:在 view controller 中使用 view.bounds,在 view 中使用 superview.bounds,或在 SwiftUI 中使用 GeometryReader 获取的尺寸。

避免通过 idiom 或 size class 判断设备类型

如今 iPhone app 可能出现任何 size class 组合。

  • 避免通过 idiom 选择布局方案。
  • 避免将“普通宽度” size class 判断为 iPad。
  • 移除对特定设备尺寸的硬编码判断。
  • 检查全出血图片或视频,避免关键内容裁切。

适配步骤 3:测试尺寸自适应能力

使用以下工具测试尺寸自适应:

  • Device Hub 中的 iOS 可变尺寸模拟器。
  • macOS 27 的 iPhone 镜像。
  • Xcode 27.1 的 iPhone Duo 模拟器(测试完整原生体验的最佳方式)。

更进一步:在 App Store 中展示

  • 展示对 iPhone Duo 的支持:在 App Store Connect 中提交 iPhone Duo 屏幕截图后,Store 详情页将展示专属认证徽章。
  • 预览素材: 使用 App Store Connect 中全新的预览工具查看素材在 iPhone Duo 上的实际效果。
  • 申请编辑推荐:在 App Store Connect 中提交推荐申请,让编辑团队了解你的 app 支持 iPhone Duo。