安卓WebView视口

6

使用下面的 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。不好意思,我没有答案。 - alex2k8
2个回答

13

我有同样的问题并找到了答案!
在你的情况下,你需要:

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

它可以工作,但 setLoadWithOverviewMode 仅存在于 API Level 7 及以上版本。 - alex2k8

0

问题已部分解决,现在我可以通过双击来缩放:

webView.getSettings().setUseWideViewPort(true);

编辑: 不好意思,我错了……我改了测试HTML后发现它是按页面宽度缩放到1000像素,而不是视口宽度缩放到640像素。

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接