CODEWITHSUNDEEP
androidwebviewwidthviewport
alex2k8
alex2k8

Reputation: 43214

Android WebView viewport

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>

Upvotes: 6

Views: 14208

Answers (2)

AlexKorovyansky
AlexKorovyansky

Reputation: 4953

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

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

Upvotes: 13

alex2k8
alex2k8

Reputation: 43214

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>

Upvotes: 0

Related Questions