Meet Safari for spatial computing
Spatial Computing 进阶 20m

认识空间计算平台上的 Safari

Meet Safari for spatial computing

2023年6月5日

在 Apple 官方观看视频

一句话判断

如果你的网站在 iPad 上表现正常，在 visionOS 的 Safari 上大概率也没问题——但交互区域（Interactive Regions）和高亮机制是这个平台独有的，需要你检查 CSS cursor 和 border-radius 的设置是否合理。

这场 Session 讲了什么

Session 介绍了 Safari 在 visionOS 上的工作方式和 Web 开发者需要了解的最佳实践。

Safari 在 visionOS 上使用与 macOS/iPadOS 相同的 WebKit 引擎，网站无需修改即可正常工作。响应式设计、CSS viewport 单位、media queries、SVG 图形等技术在 visionOS 上同样适用。devicePixelRatio 和响应式图片会自动适配推荐的分辨率。

交互方式是这个平台的核心差异。主要输入方式是眼+手的融合：用户注视链接时，Safari 会给链接一个柔和的高亮（不需要网站知道用户在看哪里）；用户捏合手指触发点击。直接用手指触碰窗口也是支持的。底层通过 pointer events 实现：注视方式中 pointerdown 基于注视定位，直接触碰中 pointerdown 基于手指位置。

**交互区域（Interactive Regions）**是 Safari 自动生成的视觉反馈系统。按钮、链接、表单元素和对应的 ARIA 角色元素会自动获得高亮。对于自定义交互元素，需要设置 cursor: pointer 才能获得高亮。高亮的形状由 CSS border-radius 控制，应该与元素的视觉风格匹配。

Session 还展示了如何使用 xrOS 模拟器调试交互区域：鼠标移动模拟注视位置，点击模拟捏合。

值得深挖的点

hover 的替代方案：visionOS 上传统的 hover 样式不会被触发，因为设备不知道你在看哪里（隐私保护）。取而代之的是系统级的高亮机制。这意味着依赖 hover 展示菜单或工具提示的网站需要重新设计交互方式。

pointer-events 的调试价值：Session 提到一个实用技巧——对内部子元素设置 pointer-events: none 可以防止它们被单独高亮，让整个父元素作为一个交互区域。这同时也简化了事件处理代码，因为你总是拿到相同的事件目标。

cursor: pointer 的重要性：这不是一个纯视觉效果，在 visionOS 上它决定了元素是否能被高亮。如果你的网站全局覆盖了 cursor 样式（比如设为 default），可能导致所有链接失去高亮能力。这是最容易踩的坑。

代码片段

优化交互区域的高亮效果：

/* 自定义交互元素需要 cursor: pointer 才能被高亮 */
.list-item {
    cursor: pointer;
    border-radius: 8px; /* 高亮形状跟随圆角 */
}

/* 内部子元素不需要单独高亮 */
.list-item .icon,
.list-item .label {
    pointer-events: none;
    /* 这样点击和高亮都指向 .list-item 本身 */
}

/* 按钮的高亮形状应匹配视觉风格 */
.nav-button {
    cursor: pointer;
    border-radius: 12px;
    /* 高亮圆角与视觉圆角一致 */
}

/* SVG 优先用于 UI 图标，确保任意缩放不失真 */
.icon {
    /* 使用 SVG 而非位图，在近距离观看时仍然清晰 */
}

最佳实践

  • 使用响应式设计和 CSS viewport 单位确保网站适配任意窗口大小
  • SVG 优先用于 UI 图标，位图配合 devicePixelRatio 加载正确分辨率
  • 检查所有交互元素是否设置了 cursor: pointer（特别是自定义控件）
  • 用 pointer-events: none 防止内部子元素被单独高亮
  • 用 border-radius 让高亮形状匹配元素的视觉风格
  • 在 xrOS 模拟器中测试交互区域和高亮效果

还有什么值得关注

  • visionOS 上 3D Web 内容（WebGL/WebGPU）的性能表现
  • 全屏视频在空间计算平台上的沉浸式体验
  • 多窗口场景下网站之间的交互可能性
  • WebXR 在 visionOS 上的支持计划
WWDC 2023