App WebView in Android 4.4+ not dealing with Viewport correctly

Viewed 1468

I'm looking for a solution regarding a viewport related issue with the new 4.4+ Android Webview.

The problem, in detail, is that in the new 4.4+ Android webview, the view port is not being dealt with correctly, or possibly ignored, resulting in the content not filling device width properly.

HOW TO REPRODUCE:

<html>
<head>
   <meta name="viewport" content="width=320">  
    <body style="margin:0px;">   
        <div style="width:320px; height:300px; background-color:purple;"> 
            <div style="background-color:rgba(110,110,110,0.7);">
                This box is 320px wide.
            </div>        
        </div>  
    </body>  
</html>

When viewed on a device, should the above page not draw a purple box that covers the entire width of any screen?

Here is a graphical demonstration:

html page coded above, with a simple 320px box displayed through the app: https://drive.google.com/file/d/0B2beYh8CaQEUTEREdFNaRFZvbHc/edit?usp=sharing

same html page shown above, on same device, shown on chrome: https://drive.google.com/file/d/0B2beYh8CaQEUamoyNmZzVjA5WWc/edit?usp=sharing

So first question, why is my viewport meta tag being ignored in the app?

Ive tried changing the following: this.appView.getSettings().setUseWideViewPort(true); this.appView.getSettings().setLoadWithOverviewMode(true);

still no luck

Ive seen the following threads: WebView in Android 4.4 and initial-scale Android-- PhoneGap/WebView ignores viewport meta tags?

still need help :(

1 Answers
Related