21:9 Aspect Ratio Support

This topic describes how to configure your Tizen Web application to support ultrawide, 21:9 aspect ratio displays.

Figure 1. Samsung ultrawide display

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.

Figure 2. Video display size in a 16:9 aspect ratio application
Figure 2. Video display size in a 16:9 aspect ratio application

Implementing 21:9 Aspect Ratio Support

To enable your Web application to fill a 21:9 aspect ratio screen:

  1. Add the base_screen_resolution metadata key with the value extensive to 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.

  2. To support both 16:9 and 21:9 screens in your application, you must implement a responsive design and define the viewport metadata 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.

Figure 3. Video display size in a 21:9 aspect ratio application
Figure 3. Video display size in a 21:9 aspect ratio application
NoteWhen a 16:9 fixed size application is displayed on a 21:9 screen, the application is aligned to the left side of the screen. To show the application in the middle of the screen, you need to resize or center align the application.

AltStyle によって変換されたページ (->オリジナル) /