Question

我正在寻找与新的4.4+ Android Webview相关的视口相关问题的解决方案。

问题在于，在新的4.4+ Android webview中，视口未正确处理或可能被忽略，导致内容无法正确填充设备宽度。

如何重现：

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

在设备上查看时，上面的页面是否应该绘制一个覆盖任何屏幕整个宽度的紫色框？

这是一个图形演示：

上面编码的html页面，通过应用程序显示一个简单的320px框： https://drive.google.com/file/d/0B2beYh8CaQEUTEREdFNaRFZvbHc/edit?usp=sharing

上面显示的同一个html页面，在同一设备上，显示在chrome上： https://drive.google.com/file/d/0B2beYh8CaQEUamoyNmZzVjA5WWc/edit?usp=sharing

所以第一个问题，为什么我的视口元标记在应用程序中被忽略？

我试过更改以下内容：。this.appView.getSettings（）setUseWideViewPort（真）; 。this.appView.getSettings（）setLoadWithOverviewMode（真）;

仍然没有运气

我见过以下主题： WebView in Android 4.4 and initial-scale Android-- PhoneGap/WebView ignores viewport meta tags?

仍然需要帮助:(

Answer 1

虽然文档不再提及它，但是多个Android设备上的默认浏览器用于忽略视口标记（如果它设置为320px），并且只使用“设备宽度”。没有办法覆盖，唯一的建议是将视口设置为321px，尽管这不是最优雅的解决方案。看到这篇旧帖子： galaxy S3.. viewport meta tag doesns't work

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

1 个答案: