Android WebView 视口

发布于 2024-10-09 00:52:23 字数 935 浏览 8 评论 0原文

对于下面的 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>

原文

With html below I expected that the green rectangle would occupy only half of the screen, but in practice it occupies the whole screen width. I tried other values for viewport width, no luck. Any ideas why it does not work?

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

窝囊感情。 2024-10-16 00:52:23

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

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

I had the same question and found answer!
In your case you need:

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

回复收藏 0 原文

缪败 2024-10-16 00:52:23

部分解决，现在我可以通过双击进行缩放：

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>

Partially solved, now I can scale by double tap:

webView.getSettings().setUseWideViewPort(true);

EDIT:
No, I was wrong... I changed the test html, and found that it scales to page width - 1000px, and not to the viewport width - 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>

回复收藏 0 原文

~没有更多了~