How can I enable pinch zooming with Ionic Capacitor?

Question

I am building an app using Capacitor to embed my website as the main portion of the app where there are portions that I want to be able to pinch-zoom (a photo gallery, for example). I've found answers about the Android WebViews and the HTML meta tag using the maximum-scale setting, like so, but after changing the meta tag the webview still doesn't support pinch zooming. Is there a way to override the Capacitor settings to allow zooming?

score 4 · Accepted Answer · answered Aug 06 '21 at 15:48

I found the answer after getting some clues from a GitHub issue where they modified the Capacitor BridgeActivity class code to change the WebView initialization, but I didn't really want to modify code that might be automatically generated or is part of the capacitor core, so I found a way to do it with plugins.

Writing the following ZoomPlugin class allows me to access the WebView through the bridge attribute and modify the zoom setting:

package com.example.app;

import com.getcapacitor.Plugin;
import com.getcapacitor.annotation.CapacitorPlugin;

@CapacitorPlugin(name = "Zoom")
public class ZoomPlugin extends Plugin {
    @Override
    public void load() {
        this.bridge.getWebView().getSettings().setBuiltInZoomControls(true);
        // disables zoom in/zoom out buttons in the webview, to only allow pinch to zoom
        this.bridge.getWebView().getSettings().setDisplayZoomControls(false);
    }
}

After writing the plugin, register it in the MainActivity class:

package com.example.app;

import android.os.Bundle;
import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        registerPlugin(ZoomPlugin.class);
    }
}

Now pinch-to-zoom should work as long as your meta tag is set correctly, as mentioned in other answers:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2.5" />

The important part of this being maximum-scale=2.5 which will set the zoom limit to be 2.5x. You can disable zoom for a page by setting maximum-scale to be the same as initial-scale.

Is it possible to accept cookies or pass headers of WebView using above Plugin Reference? — Jaimin Thakkar, Nov 18 '21 at 13:07
Thank you @Phin - your solution is supurb. I tried all kinds of plugins from ionic and cordova. Yours did the job perfectly and works both for scaling images or keeping the dialog unscaled (fixed). All controlled by the viewport meta data. Lovely... — Paul C. R., May 21 '22 at 08:58
In my case, I had to `registerPlugin(ZoomPlugin.class);` before `super.onCreate(savedInstanceState);` to make it work, as described in the documentation : https://capacitorjs.com/docs/android/custom-code#mainactivityjava — Nicolas Roehm, Feb 21 '23 at 20:43

score 0 · Answer 2 · answered Mar 08 '23 at 04:26

I constructed a plugin at https://www.npmjs.com/package/capacitor-zoom-android that can be used to enable and disable zoom.

Capacitor.Plugins.ZoomPlugin.enableZoom() //This easy

Thank you @Phin Jensen for the inspiration! I may have opened the issue, but I never realized a plugin would work here.

How can I enable pinch zooming with Ionic Capacitor?

2 Answers2