Android 4.4+ 中的 App WebView 无法正确处理视口答案

【问题标题】：App WebView in Android 4.4+ not dealing with Viewport correctlyAndroid 4.4+ 中的 App WebView 无法正确处理视口
【发布时间】：2014-01-05 21:09:58
【问题描述】：

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

具体问题在于，在新的 4.4+ Android webview 中，view port 没有得到正确处理，或者可能被忽略，导致内容没有正确填充设备宽度。

如何复制：

<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(true); this.appView.getSettings().setLoadWithOverviewMode(true);

还是不行

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

仍然需要帮助:(

【问题讨论】：

同样的问题，希望有答案！
您是否尝试将您的 webview 的 xml 设置为 android:layout_width="match_parent" 和 android:layout_height="match_parent"？

标签： android html screen viewport mobile-devices

【解决方案1】：

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

【讨论】：