Android WebView 视口答案

【问题标题】：Android WebView viewportAndroid WebView 视口
【发布时间】：2011-05-29 17:34:19
【问题描述】：

对于下面的 html，我预计绿色矩形只会占据屏幕的一半，但实际上它占据了整个屏幕宽度。我尝试了视口宽度的其他值，但没有运气。任何想法为什么它不起作用？

HTML

<html>
<head>
    <meta name="viewport" content="width=640" />
</head>
<body>
    <div style="width: 300px; height: 50px; background: green;">300px</div>
    <div style="width: 600px; height: 50px; background: yellow;">600px</div>
</body>
</html>

Xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    >

    <WebView
        android:id="@+id/web_view"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        />
</LinearLayout>

【问题讨论】：

@vnshetty。不，我没有答案。

标签： android webview width viewport

【解决方案1】：

我有同样的问题并找到了答案！
在您的情况下，您需要：

WebSettings settings = webView.getSettings();
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);

【讨论】：

它可以工作，但 setLoadWithOverviewMode 仅从 API 级别 7 开始存在。

【解决方案2】：

部分解决，现在我可以双击缩放：

webView.getSettings().setUseWideViewPort(true);

编辑： 不，我错了...我更改了测试 html，发现它缩放到页面宽度 - 1000px，而不是视口宽度 - 640px。

<div style="width: 300px; height: 50px; background: green;">300px</div>
<div style="width: 600px; height: 50px; background: yellow;">600px</div>
<div style="width: 1000px; height: 50px; background: red;">1000px</div>

【讨论】：