21:9 Aspect Ratio Support
This topic describes how to configure your Tizen Web application to support ultrawide, 21:9 aspect ratio displays.
Tizen displays are available with various aspect ratios, including 16:9 and 21:9. By default, Web applications support the 16:9 aspect ratio.
The size of a video played within a Web application is limited by the aspect ratio of the application. Consequently, on a 21:9 display, a video with 21:9 aspect ratio played in a 16:9 application appears smaller instead of filling the screen.
The following figure illustrates how an application's 16:9 aspect ratio constrains the video display size on the wider screen.
Implementing 21:9 Aspect Ratio Support
To enable your Web application to fill a 21:9 aspect ratio screen:
base_screen_resolutionmetadata key with the value
extensiveto the application's "config.xml" file:
<tizen:metadata key="http://tizen.org/metadata/app_ui_type/base_screen_resolution" value="extensive"/>NoteThis feature is supported by the "23TV_PREMIUM2" TV model group only. For the "23_OSCARS_GMT9" model (from Diamond), the 32:9 aspect ratio is also supported.
To support both 16:9 and 21:9 screens in your application, you must implement a responsive design and define the
viewportmetadata tag in the HTML header:
<html> <head> <meta name="viewport" content="width=device-width"/> </head> <body> <script> let width = window.innerWidth; // width = 2560 let height = window.innerHeight; // height = 1080 </script> </body> </html>
The following figure illustrates how a video is displayed on 21:9 and 32:9 aspect ratio screens when the
base_screen_resolution metadata key is defined.