WebView is loading wrong resolution

Question

I'm working on an App for Fire TV. I'm using a TV with 1920px width. In the App is a Webview in full size (match_parent). But if I check the Resolution of the WebView (window.screen.availWidth) it's only 960px.

Could anybody help me please?

Answer 1

The Amazon Fire TV platform scales your resources to the appropriate TV output. For 1080p the screen size is 1920x1080px, the density is 320dpi (“xhdpi”) and the output resolution is 960x540dp (“large”).

https://developer.amazon.com/docs/fire-tv/design-and-user-experience-guidelines.html#screen-size-and-resolution

Answer 2

With reference to Display and Layout (Amazon Fire TV)

When your app runs, Fire TV loads your resources from the appropriate folder. See below image Display and Layout for more information on the resource configurations available for Amazon Fire TV.
android screen resolution

Answer 3

You can use html 'initial-scale' for to fit the template

<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0">
<script>
    /**
     * This script will set the 'initial-scale' value on the viewport metatag
     * The scale is used to fit the template on Kindle Fire mobile devices
     * This must be handled in the head of the document because the scale
     * is not affected once the page finishes loading
     */
    var vp = document.getElementById('viewport');

    var initialScale = Math.max(screen.width, screen.height) / 1920;

    vp.setAttribute('content', 'width=device-width, initial-scale=' + initialScale + ', maximum-scale=' + initialScale, +'minimum-scale=' + initialScale);

</script>