Meet Safari for spatial computing

Highlight

Safari 在 visionOS 上使用与 iPad/macOS 相同的 WebKit 引擎，网站无需修改即可运行。核心变化在于输入模型（眼+手融合）和交互区域（Interactive Regions）的视觉反馈系统，同时支持 AR Quick Look、HTML <model> 元素和 WebXR 三种方式在网页中展示 3D 内容。

核心内容

现有网站开箱即用

visionOS 上的 Safari 是完整的 WebKit 引擎。所有基于 Web 标准的网站都能直接运行，响应式设计从 iPhone 手掌大小到填满整个房间都能自适应。

已有的最佳实践仍然适用：

用 CSS viewport 单位和 media/container queries 响应窗口变化
SVG 优先用于 UI 元素，确保窗口靠近时仍清晰
位图配合 devicePixelRatio 和响应式图片加载正确分辨率

（01:02）

眼+手融合的输入模型

visionOS 的主要交互方式是注视（eye）+ 捏合（pinch）的组合：

用户注视一个元素，Safari 会自动给该元素添加高亮
用户捏合手指触发点击
捏合开始时，眼睛的位置用于定位 pointerdown 事件
捏合过程中，pointermove 跟踪手部运动
松开手指时派发 pointerup

也可以直接用手指触碰窗口：

手指与窗口相交时派发 pointerdown
手指位置决定事件目标
手指离开窗口时派发 pointerup

在 media query 层面，这种输入模型被视为 coarse pointer 且不支持 hover，与触摸屏类似。但蓝牙连接的触控板或键盘也可以配合使用。

（03:33）

交互区域（Interactive Regions）

注视时的高亮由 Safari 自动生成”交互区域”。WebKit 根据可访问性标记和 CSS 样式自动识别交互元素：

按钮、链接、菜单和对应 ARIA 角色的元素自动获得高亮
输入框和表单元素也会自动高亮
自定义交互元素需要设置 cursor: pointer
高亮的形状由 CSS border-radius 控制

内部子元素如果不需要单独高亮，可以设置 pointer-events: none，这样既简化高亮效果，也统一事件处理的目标。

（05:09）

动画性能优化

visionOS 上的动画会以设备支持的最高帧率运行，比 iPad 可能更快。如果动画基于每帧固定增量，在高帧率设备上会加速过快。

正确的做法是在 requestAnimationFrame 回调中测量每帧之间的时间差，用时间差计算动画进度：

let lastTime = 0;

function animate(currentTime) {
    const deltaTime = currentTime - lastTime;
    lastTime = currentTime;
    
    // 用 deltaTime 计算进度，而不是固定增量
    const progress = deltaTime * speed;
    element.style.transform = `translateX(${currentX + progress}px)`;
    
    requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

关键点：

currentTime 是 requestAnimationFrame 回调传入的高精度时间戳
deltaTime 表示两帧之间实际经过的毫秒数
动画进度与 deltaTime 成正比，确保在不同帧率的设备上速度一致
滚动事件监听器应使用 { passive: true }，避免阻塞滚动

（10:56）

全屏行为的差异

visionOS 上全屏时，窗口会调整到一个默认尺寸，同时该尺寸也会作为 screen 对象的尺寸报告给 JavaScript。这保证了期望 window 和 screen 尺寸匹配的网站继续工作。

但全屏窗口在 visionOS 上可以被用户调整大小，甚至可能超过报告的 screen 尺寸。网站不应假设全屏时窗口尺寸固定不变。

（10:05）

详细内容

在网页中嵌入 3D 内容

Session 介绍了三种在网页中展示 3D 内容的方式。

AR Quick Look：与 iOS 12 引入的 AR Quick Look 相同，用锚点链接指向 USDZ 文件：

<a rel="ar" href="model.usdz">
    <img src="preview.jpg" alt="3D Model Preview">
</a>

在 visionOS 上，点击后会在用户空间中展示 3D 对象，利用 RealityKit 的高级光照和渲染。

（12:13）

HTML <model> 元素：正在提案中的 W3C 标准，相当于”3D 对象的 img 标签”：

<model src="model.usdz" interactive></model>

src 指定 3D 对象源文件
interactive 属性启用用户交互
JavaScript API 提供相机控制、动画播放等能力
在 Safari 中可通过功能标志启用

这个元素会在不同设备上提供最佳渲染，从普通 2D 视图到立体视图和环境光照。

（13:27）

WebXR：W3C 标准，用于构建完全沉浸式的 Web 场景：

// 请求沉浸式 WebXR 会话
const session = await navigator.xr.requestSession('immersive-vr');

基于 WebGL，许多流行的 WebGL 库已内置支持
在 visionOS Safari 的高级设置中启用功能标志
用户会真正”进入”场景，而不是用鼠标拖拽

（14:25）

调试交互区域

在 xrOS 模拟器中：

鼠标移动模拟注视位置
点击模拟捏合手势
可以在 Web Inspector 中检查交互区域

常见问题和修复：

按钮不高亮：检查是否设置了全局 cursor 样式覆盖了默认的 cursor: pointer
高亮区域不对：可能是只有文字在链接内，而按钮本身不是链接的一部分。应让 <a> 标签包裹整个按钮
高亮圆角不匹配：给交互元素添加与视觉样式相同的 border-radius
内部子元素单独高亮：给不需要交互的子元素设置 pointer-events: none

（07:12）

核心启发

1. 为电商网站添加 3D 商品预览

做什么：在商品详情页用 AR Quick Look 或 <model> 元素展示商品的 3D 模型。

为什么值得做：visionOS 用户可以直接把商品放在自己的空间中查看，比平面图片更有说服力。AR Quick Look 的代码在 iOS 和 visionOS 上完全兼容。

怎么开始：用 Reality Composer Pro 或 Object Capture 生成 USDZ 文件，在商品图片外加 <a rel="ar"> 链接。已有 iOS AR Quick Look 的网站无需任何修改。

2. 优化自定义组件的交互反馈

做什么：审查网站中所有自定义交互元素（卡片、列表项、轮播图等），确保在 visionOS 上获得正确的高亮反馈。

为什么值得做：visionOS 用户依赖高亮确认注视目标。如果自定义组件没有 cursor: pointer，用户无法确定是否注视到了正确的元素。

怎么开始：全局搜索自定义点击事件的处理元素，给它们加上 cursor: pointer。检查内部子元素是否需要 pointer-events: none。在 xrOS 模拟器中逐一验证。

3. 构建沉浸式 WebXR 体验

做什么：用 WebXR 和 Three.js/Babylon.js 创建完全沉浸式的 3D 场景，如虚拟展厅、沉浸式数据可视化、3D 故事叙述。

为什么值得做：visionOS 上的 WebXR 让用户真正进入场景。这是网页从未有过的体验维度。

怎么开始：在 Safari 中启用 WebXR 功能标志，用 Three.js 的 WebXRManager 请求 immersive-vr 会话，从简单的 360 度全景图开始迭代。

4. 帧率无关的动画系统

做什么：把所有基于 requestAnimationFrame 的动画改为时间驱动，确保在 ProMotion 显示器和 visionOS 高帧率设备上速度一致。

为什么值得做：visionOS 的渲染管线可能以更高帧率运行，固定增量动画会加速。时间驱动动画在任何帧率下都表现一致。

怎么开始：遍历所有 requestAnimationFrame 回调，把固定增量（如 x += 2）改为基于 deltaTime 的计算（如 x += speed * deltaTime）。

关联 Session

Develop your first immersive app — 开发第一个沉浸式应用，了解 visionOS 应用开发基础
Explore the USD ecosystem — 了解 USD 生态系统，学习如何创建和优化 3D 模型
What’s new in CSS — CSS 新特性，包括容器查询和新的布局能力