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"/>

  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