Safari 登陆 Apple HomeView
内容提要
Safari 已登陆 Apple HomeView，基于 WebKit，网页无需改动即可运行。开发者可通过 schema.org 的 JSON-LD 标记食谱，让 Safari 提供分步烹饪视图，并为视频添加 WebVTT 字幕以优化体验。同时应避免假设用户只用点击、iOS 即 iPhone、屏幕非方即竖，改用语义化 HTML、特性检测和 Smart App Banners，并适配短视口，如限制弹窗高度。
延伸解读
新设备带来新输入方式：语音优先
HomeView 支持从房间远处用语音操作，也可点击 7 英寸方形屏幕。文章提醒，用户可能不是“指着按钮”而是“叫出按钮名字”，因此语义化 HTML、真实按钮/链接/表单控件和清晰标签变得关键。若网站依赖点击或触摸假设，语音交互可能失效。开发者应检查控件是否可被语音定位，并确保大点击目标和灵活布局，兼顾说话与触摸两种使用方式。
别再用 UA 判断设备：iOS 不等于 iPhone
Safari on HomeView 同样上报 iOS 用户代理，所以“iOS UA 就是 iPhone”的假设会出错。文章建议用特性检测判断 API 是否支持，而不是嗅探 UA。对于引导下载 App 的横幅，应改用 Smart App Banners，让 Safari 决定是否展示；在 HomeView 上这类横幅可能并不合适。这样能减少因设备形态变化导致的意外行为，让网站更稳健。
短视口与方形屏幕：布局要留退路
HomeView 的视口高度比 600px 更短，屏幕也不一定非横即竖。固定或粘性页眉页脚可能挤占主内容空间，高于视口的弹窗（如订阅框）可能让用户无法关闭。文章给出快速修复：给弹窗设置 max-height: 90svh 和 overflow-y: auto。没有设备时，可用手机横屏测试，或在 Safari 响应式设计模式中设为 448×364，提前暴露短高度问题。
食谱与视频：用结构化数据提升体验
Safari 能识别页面中的食谱，并提供分步烹饪视图，数据来自 JSON-LD 的 schema.org Recipe 类型。若网站有食谱但未标记，可按文章示例添加 JSON-LD，包含名称、图片、准备/烹饪时间、产量、配料和步骤。视频方面，应通过 track 元素引入 WebVTT 字幕文件，以改善 HomeView 上的字幕体验。这些增强不需要改动网页核心逻辑，但能显著提升特定场景的可用性。
Q&A
Safari 登陆 Apple HomeView 后，开发者需要为网站做哪些适配？
大多数情况下不需要做任何事，因为 Safari 基于 WebKit，网页本身设计为可在任何屏幕和输入方式下运行。但可以做一些优化：使用 schema.org 的 JSON-LD 标记食谱以启用分步烹饪视图；为视频添加 WebVTT 字幕；避免假设用户只用点击、iOS 即 iPhone、屏幕非方即竖；使用语义化 HTML、特性检测和 Smart App Banners；适配短视口，如限制弹窗高度。
如何让 Safari 在 HomeView 上为食谱网页提供分步烹饪视图？
Safari 会识别网页中的食谱数据，并提供分步说明的简化视图。开发者需要使用 schema.org 的 Recipe 类型，以 JSON-LD 格式在页面中添加标记，包含名称、图片、准备时间、烹饪时间、产量、配料和步骤等信息。
在 HomeView 上为视频添加字幕应该用什么格式？
应使用 WebVTT 格式的字幕文件，并通过 video 元素中的 track 元素引入，例如 <track default kind="captions" srclang="en" label="English" src="captions.vtt">。
为什么在 HomeView 上要避免使用 User Agent 嗅探？
因为 Safari on HomeView 也报告 iOS 用户代理，如果网站假设 iOS 用户代理就是 iPhone，可能导致意外后果。随着技术演进，UA 嗅探不可靠，应改用特性检测来测试 API 支持，并使用 Smart App Banners 替代自定义应用下载横幅。
HomeView 的屏幕尺寸和视口有什么特点，如何避免布局问题？
HomeView 有一个 7 英寸方形屏幕，视口高度较短（小于 600px）。网站不应假设屏幕总是横向或纵向，也不应假设视口高度总是大于 600px。固定或粘性页眉页脚可能占用过多空间，弹窗可能超出视口导致无法关闭。可以通过设置 max-height: 90svh 和 overflow-y: auto 来限制弹窗高度，并在手机横屏或响应式设计模式（448×364）下测试。
HomeView 上用户如何与网页交互，网站应如何支持？
用户可以通过语音从房间远处交互，也可以点击方形 7 英寸显示屏。网站应使用语义化 HTML（真正的按钮、链接、表单字段），并为每个控件提供清晰的标签，确保可访问性、大点击目标和灵活布局，以便同时支持语音和触摸输入。
