Customizing Your Web App (Fire TV)
You can customize your web app for Amazon Fire TV in the following ways:
- You can code for device-specific appearance or behavior and have your app detect the device on which it is running.
- You can customize the navigation and the way focus is shown.
In addition, you can scale up an app developed for a 720p display so that it takes full advantage of the Fire TV's 1080p display.
- Providing a Device-Specific Experience
- Using a CSS to Customize the Appearance of Your Web App
- Customizing Focus and Navigation in Your Web App
- Displaying an App Developed in a 720p Environment
Providing a Device-Specific Experience
An app or web page can read the user agent string to detect a specific solution, and then provide a specific user experience. User agent strings can include the version of the host operating system, the version of the browser, and other information. The user agent strings for the web app solution on Fire TV are nearly identical to the strings on Fire tablets, but with a differing device model identifier. Also see the following sources of information:
- For a list of non–Fire TV user agent strings, see the "Web App Development" section of Amazon Web Apps Frequently Asked Questions.
- For the rules for the device model and how to detect current and future Amazon Fire TV devices, see Identify Fire TV Devices.
Using a CSS to Customize the Appearance of Your Web App
It is important that you style focused items on a page in a way which clearly signifies that a subsequent press on the center button would select it. The default selection indicators (yellow border and/or blue background) are not recommended and should be customized on a per-application basis. To define this styling, developers should use the CSS focus property.
button:focus {
border : #ffffff 2px solid;
outline : 0;
}
Some elements when focused show a blue highlighted background. The following CSS property should remove it; however any element this is applied to will have a transparent background which isn't always desired (input text field, for example).
*:focus {
outline:none;
background-color:rgba(0,0,0,0);
}
For information on the design guidelines for Amazon Fire TV web apps, see Design and User Experience Guidelines.
Customizing Focus and Navigation in Your Web App
If you want your web app to handle the selection highlighting or directional navigation on its own, capture the key event and consume it.
Displaying an App Developed in a 720p Environment
The resolution for Amazon Fire TV apps is1080p (1920x1080). If your app was developed for a 720p interface, it fills only 2/3 of the display. In this case, the best solution is to alter your app to target 1080p. However, if you want to simulate a 720p environment, you can do so by putting the following meta tag in the header of your page.
<meta name="viewport" content="initial-scale=1.5, user-scalable=no">
This meta tag sets a viewport, representing the area the web app page occupies, and sets a zoom level of 150%. The result is that the web app content looks like it would on a 720p display but fills the 1080p display area.
For more information, see "Resolution and Page Scaling section" in Getting Started with Web Apps for Amazon Fire TV.
Last updated: Oct 29, 2020
