Why does pinch-to-zoom not work in my Android WebView?

Question

I have an activity with a layout like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

    <include  layout="@layout/window_title" />

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true" 
        android:layout_below="@+id/linear_layout"/>

</RelativeLayout>

Here is how I'm configuring it:

    // Enable JavaScript.
    WebView myWebView = (WebView) findViewById(R.id.webView);
    WebSettings webSettings = myWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);

    // Settings so page loads zoomed-out all the way.
    webSettings.setLoadWithOverviewMode(true);
    webSettings.setUseWideViewPort(true);
    webSettings.setBuiltInZoomControls(true);

Here's the version setting from my manifest file:

<uses-sdk
    android:minSdkVersion="10"
    android:targetSdkVersion="17" />

I'm trying to load this page in the WebView:

https://new.livestream.com/lcboise

The page loads just fine, but I can't pinch to zoom. I've tried different combinations of the WebView settings (above, including others not listed) but it just won't zoom.

Observations:

1) Loading up a different page I'm using (https://lcboise.infellowship.com/UserLogin) in the EXACT same WebView allows me to zoom.

2) My main test device, where is DOES NOT work, is a HTC One running v4.4.3 of Android.

3) I can load, and zoom, the livestream page on an older test device I'm using that's running v2.3.3 of Android.

Is it possible that something in the page itself is breaking the WebView running on the HTC One? If so, any guesses as to might be doing it?

Update [SOLUTION]:

Here is what I had to add to my WebView to get pinch-to-zoom to work:

    myWebView.setWebViewClient(new WebViewClient() {

        @Override
        public void onPageFinished(WebView view, String url) {
            String javascript="javascript:document.getElementsByName('viewport')[0].setAttribute('content', 'initial-scale=1.0,maximum-scale=10.0');";
            view.loadUrl(javascript);
        }
    });

Thanks for the question and the solution! Your snippet can actually enable the webview zoom by fingers, however it adds an additional zoom in/out button besides the webview native ones. Do you know any way to disable them? — thahgr, Mar 09 '21 at 11:38

score 17 · Accepted Answer · edited Jul 19 '21 at 19:02

17

This is the page you linked has the following viewport meta tag:

<meta name="viewport" content="width=1024, maximum-scale=1.0, target-densitydpi=device-dpi">

The page that works has a different viewport meta tag. The maximum-scale bit is telling the WebView to not allow zooming in more than the specified amount.

The site should also be broken in any modern mobile browser. Setting maximum-scale to a low value like that is not very "mobile friendly" so it might just be a bug on the site. Have you tried contacting the owner, maybe they can fix it server-side?

There is not a whole lot you can do in the WebView that will not result in other sites rendering incorrectly. You could try injecting JavaScript to fix up the page by changing the meta tag as a last resort.

edited Jul 19 '21 at 19:02

Zoe

27,060
21
118
148

answered Dec 02 '14 at 10:44

marcin.kosiba

3,221
14
19

1

Thanks for the reply! I ended up having to inject some Javascript into the page just like you said. See my update above to view the exact code I put in it. – Mr. Spock Dec 02 '14 at 21:34
Your answer helped me, plus 1 – Akshatha S R Jun 14 '16 at 08:45

score 10 · Answer 2 · edited Dec 24 '18 at 13:24

10

Add these two lines to enable pinch to zoom in webview

webview.getSettings().setSupportZoom(true);
webview.getSettings().setBuiltInZoomControls(true);

edited Dec 24 '18 at 13:24

Priyank Patel

12,244
8
65
85

answered Jan 05 '17 at 12:45

Saurabh Padwekar

3,888
1
31
37

score 5 · Answer 3 · edited May 23 '17 at 11:46

5

Have you tried this suggestion?

webSettings.setSupportZoom(true);

See Disable pinch zoom in WebView?

Note the link is in regards for disabling zoom. But perhaps your zoom is being disabled by default as some users suggest.

edited May 23 '17 at 11:46

Community

1
1

answered Dec 01 '14 at 20:41

David Carrigan

751
1
8
21

Thanks for the reply! Unfortunately, this does not work. Like I said above, I'm a bit perplexed why I can load a different page in the exact WebView in the exact Activity and it zooms just fine. At first glance, this would seem to implicate the web page itself as the source of the problem. – Mr. Spock Dec 01 '14 at 20:47

score 4 · Answer 4 · edited Jul 19 '21 at 19:02

4

On my issue, I succeed with above JavaScript injection due to viewport restrictions. Somehow onPageFinished didn't worked in my case but onLoadResource did the trick.

@Override
public void onLoadResource(WebView view, String url) {
    view.loadUrl("javascript:document.getElementsByName(\"viewport\")[0].setAttribute(\"content\", \"width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes\");");
    super.onLoadResource(view, url);
}

edited Jul 19 '21 at 19:02

Zoe

27,060
21
118
148

answered Sep 10 '19 at 19:38

asozcan

1,370
1
17
24

1

I have been finding the solution to this problem for a very long time! I had given up but just now came across this answer and it worked like a charm! – FutureJJ May 27 '22 at 19:08

score 3 · Answer 5 · edited Aug 17 '20 at 15:20

3

wv.getSettings().setBuiltInZoomControls(true);
wv.getSettings().setDisplayZoomControls(false);

worked flawlessly for me.

edited Aug 17 '20 at 15:20

Pankaj Kumar

81,967
29
167
186

answered Nov 11 '17 at 10:19

Pemba Tamang

1,235
16
38

score 1 · Answer 6 · edited Jul 19 '21 at 19:02

1

For Zoom:

webSettings.getSettings().setBuiltInZoomControls(true);

For Disable:

webSettings.getSettings().setBuiltInZoomControls(false);

edited Jul 19 '21 at 19:02

Zoe

27,060
21
118
148

answered Nov 23 '16 at 09:45

Abhisekh Tripathy

37
4

Ewerton Ramos Pires · Answer 7 · 2021-07-19T19:00:50.797

0

To allow zoom at Android WebView the only settings needed are:

webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setDisplayZoomControls(false);
Make sure that HTML header viewport has proper values;
If you are changing the settings after load, make sure call from UIThread;

edited Jul 19 '21 at 19:00

answered Jul 19 '21 at 15:16

Ewerton Ramos Pires

141
1
5

Why does pinch-to-zoom not work in my Android WebView?

7 Answers7

Linked