Android 4.4+中的App WebView无法正确处理Viewport

Question

I'm looking for a solution regarding a viewport related issue with the new 4.4+ Android Webview. 我正在寻找与新的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. 问题在于，在新的4.4+ Android webview中，视口未正确处理或可能被忽略，导致内容无法正确填充设备宽度。

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 上面编码的html页面，通过应用程序显示一个简单的320px框： 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 上面显示的同一个html页面，在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（）。setUseWideViewPort（true）; this.appView.getSettings().setLoadWithOverviewMode(true); 。this.appView.getSettings（）setLoadWithOverviewMode（真）;

still no luck 仍然没有运气

Ive seen the following threads: WebView in Android 4.4 and initial-scale Android-- PhoneGap/WebView ignores viewport meta tags? 我见过以下主题： Android 4.4中的WebView和初始规模的 Android-- PhoneGap / WebView忽略了视口元标记？

still need help :( 仍然需要帮助:(

Answer 1

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". 虽然文档不再提及它，但是多个Android设备上的默认浏览器用于忽略视口标记（如果它设置为320px），并且只使用“设备宽度”。 There is no way to override, the only suggestion was to set your viewport to 321px, although that is not the most elegant solution. 没有办法覆盖，唯一的建议是将视口设置为321px，尽管这不是最优雅的解决方案。 See this older post: galaxy S3.. viewport meta tag doesns't work 看到这篇较老的帖子： galaxy S3 .. viewport meta标签不起作用

Android 4.4+中的App WebView无法正确处理Viewport

问题描述

1 个解决方案

解决方案1
0 2014-03-03 15:49:55

Android 4.4+中的App WebView无法正确处理Viewport

问题描述

1 个解决方案

解决方案1 0 2014-03-03 15:49:55

解决方案1
0 2014-03-03 15:49:55