4

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 :(

Community
  • 1
  • 1
D G
  • 80
  • 7

1 Answers1

0

Although the documentation no longer mentions it, the default browser on multiple android devices used to ignore the viewport tag if it was set to 320px, and just use "device width". There is no way to override, the only suggestion was to set your viewport to 321px, although that is not the most elegant solution. See this older post: galaxy S3.. viewport meta tag doesns't work

Community
  • 1
  • 1
unconditional_loading
  • 161
  • 4