自定义您的 Web 应用


自定义您的 Web 应用

您可以通过以下方式为 Amazon Fire TV 自定义 Web 应用:

  • 您可以对设备特定的外观或行为进行编码,并让您的应用检测它正在其中运行的设备。
  • 您可以自定义导航和显示焦点的方式。

此外,您还可以扩展为 720p 显示器开发的应用,从而充分利用 Fire TV 的 1080p 显示器。

提供特定于设备的体验

应用或网页可以读取用户代理字符串以检测特定平台,然后提供特定的用户体验。用户代理字符串可以包括主机操作系统的版本、浏览器的版本和其他信息。Fire TV 上 Web 应用平台的用户代理字符串与 Fire 平板电脑上的用户代理字符串几乎相同,但具有不同的设备型号标识符。另请参阅以下信息来源:

使用 CSS 自定义 Web 应用的外观

页面上的焦点项目的样式要清楚地表明随后按下中央按钮时将会选择该项目,这一点非常重要。默认选择指示符(黄色边框和/或蓝色背景)通常不建议使用,应根据每个应用进行自定义。 要定义此样式,开发者应使用 CSS focus 属性。

button:focus {
    border : #ffffff 2px solid;
    outline : 0;
}

某些元素获得焦点时将显示蓝色高亮背景。以下 CSS 属性应将其删除;但是,请注意,任何应用该背景的元素都将具有并非总是需要的透明背景(例如,输入文本字段)。

*:focus {
    outline:none;
    background-color:rgba(0,0,0,0);
}

有关 Amazon Fire TV Web 应用设计指南的信息,请参阅设计和用户体验指南

自定义 Web 应用中的焦点和导航

如果您希望 Web 应用自行处理选择突出显示或定向导航,只需捕获关键事件并使用它即可。有关捕获键事件和自定义导航的实际示例,请参阅适用于 Amazon Fire TV 的 Web 应用初学者工具包中的模板应用,该工具包可在 GitHub 上获取:https://github.com/amzn/web-app-starter-kit-for-fire-tv

显示在 720p 环境中开发的应用

Amazon Fire TV 应用的分辨率为 1080p (1920x1080)。如果您的应用是针对 720p 界面开发的,它只填充显示器的 2/3。在这种情况下,最好的解决方案是将您的应用更改为面向 1080p。但是,如果您想模拟 720p 环境,可以通过在页面的标题中放置以下元标记来做到这一点。 

<meta name="viewport" content="initial-scale=1.5, user-scalable=no">

此元标记设置一个视口,表示 Web 应用页面占用的区域,并将缩放级别设置为 150%。结果是,Web 应用内容看起来与它在 720p 显示器上时一样,但填充了 1080p 显示区域。

有关更多信息,请参阅Amazon Fire TV Web 应用入门中的“分辨率和页面缩放”部分。