Enabling viewport pinch-zoom in Phonegap Android application has no effect

Whoever even after this didn't find a solution, I found an answer in Github:

https://github.com/LouisT/cordova-useragent/issues/1

Basically you have to:

import android.webkit.WebView;

And then: 

// super.appView.getSettings().setBuiltInZoomControls(true);
// super.appView.getSettings().setDefaultZoom(ZoomDensity.MEDIUM); 
// super.appView.getSettings().setSupportZoom(true);
// Instead use this
WebView webView = (WebView) appView.getEngine().getView();
WebSettings settings = webView.getSettings();
settings.setBuiltInZoomControls(true);
settings.setDefaultZoom(ZoomDensity.MEDIUM);
settings.setSupportZoom(true);

Are you using PhoneGap Build? It is not possible with PhoneGap Build.

With Desktop PhoneGap, if you haven't already, follow the PhoneGap Getting Started with Android Guide and set your code up in an Eclipse Project.

Once set up, edit your Main Java file, as in the getting started guide: Add the following imports:

import android.webkit.WebSettings; 
import android.webkit.WebSettings.ZoomDensity;

Below the 'super.loadUrl("file:///android_asset/www/index.html");' line that you put in, as part of the start up guide, add:

settings.setBuiltInZoomControls(true);
settings.setSupportZoom(true);
settings.setDefaultZoom(ZoomDensity.MEDIUM); 

Clean and build your project - zooming should now be allowed.

To restrict how far users can zoom in, add a meta tag, like the one below to every HTML page:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1.5, user-scalable=1">

For cordova 5.x.x you need to use the solution from https://github.com/LouisT/cordova-useragent/issues/1

import android.webkit.WebView;

WebView webView = (WebView) appView.getEngine().getView();
WebSettings settings = webView.getSettings();
settings.setBuiltInZoomControls(true);
settings.setDefaultZoom(ZoomDensity.MEDIUM);
settings.setSupportZoom(true);

For me, it was required to change ZoomDensity.MEDIUM to WebSettings.ZoomDensity.MEDIUM


Just confirmed Pinch Zoom as working on the following Android Phones:

  • Samsung Galaxy S820L Android 4.4

  • LG Sunset L33L Android 5.0

With PhoneGap CLI (not the service), on Windows:

C:\>phonegap --version
5.4.1

Android SDK Tools Verion:

24.4.1 (from the SDK Manager)

Here is the code for MainActivity.java (platforms\android\src\com\phonegap\helloworld):

package com.phonegap.helloworld;

import android.os.Bundle;
import org.apache.cordova.*;

import android.webkit.WebView;
import android.webkit.WebSettings;

public class MainActivity extends CordovaActivity
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        // Set by <content src="index.html" /> in config.xml
        loadUrl(launchUrl);

        WebView webView = (WebView) appView.getEngine().getView();
        WebSettings settings = webView.getSettings();

        settings.setBuiltInZoomControls(true);
        settings.setDefaultZoom(WebSettings.ZoomDensity.MEDIUM);
        settings.setSupportZoom(true);
    }
}

And this is in index.html:

 <meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=3, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

One additional note - with this call:

settings.setDefaultZoom(WebSettings.ZoomDensity.MEDIUM);

got this when building:

uses or overrides a deprecated API - Note: Recompile with -Xlint:deprecation for details

Commented it out, and Zoom was not affected.

Thank you guys!!!