Android Applications are Not Zoomable

[ecc521]

Bug Report

UPDATE: I created a plugin (https://www.npmjs.com/package/capacitor-zoom-android) that can be used to enable zooming. That said, I still believe zoom should be enabled by default.

Capacitor Version

Latest Dependencies:

  @capacitor/cli: 3.0.0
  @capacitor/core: 3.0.0
  @capacitor/android: 3.0.0
  @capacitor/electron: 3.0.0
  @capacitor/ios: 3.0.0

Installed Dependencies:

  @capacitor/cli 2.4.7
  @capacitor/core 2.4.7
  @capacitor/ios 2.4.7
  @capacitor/android 2.4.7
  @capacitor/electron not installed

[success] Android looking great! 👌
  Found 7 Capacitor plugins for ios:
    cordova-plugin-apprate (1.7.2)
    cordova-plugin-dialogs (2.0.2)
    cordova-plugin-email-composer (0.9.2)
    cordova-plugin-file (6.0.2)
    cordova-plugin-nativestorage (2.3.2)
    es6-promise-plugin (4.2.2)
    ionic-plugin-deeplinks (1.0.22)
[success] iOS looking great! 👌

Platform(s)

Android Only

Current Behavior

Android Application will not pinch zoom.

Expected Behavior

The application zooms, like it does on iOS and on the Web.
Alternatively, if it does not zoom, iOS does not zoom either. Even though most apps don't allow zoom, it appears to me that the correct default for Capacitor would be to allow zoom (more below).

Other Technical Details

The cross-platform differences here can be fixed by making the Android WebView zoomable. I did this by adding:

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

To the BridgeActivity.java load function, however editing Capacitor code shouldn't be necessary for this.

Zooming can be disable by a meta tag even when webview zoom is enabled, so I don't believe there would be any disadvantage to making such a change (can try to submit a PR if wanted).

npm --version output: 7.11.2
node --version output: v15.8.0

Can create an MCVE if needed, however I believe this affects all Android applications built using Capacitor, and the cause appears quite clear.

[sanderschnydrig]

Hi ecc521! I'm having the same issue and I wonder, how did you get it to work?

My MainActivity.java only contains

package ch.rro.capacitor;

import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {}

So how would I go about adding these lines?

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

[ecc521]

@sanderschnydrig

[sanderschnydrig]

@ecc521 many thanks! Works like a charm. As far as I can see these changes don't reside anywhere in the project folder. So there is no way to share it between team mates and it has to be readded everytime someone wants to build the app and is not using the particular Android Studio version where the code has been changed.

Glad you found a workaround though.

[phinjensen]

For anyone who might see this post, I found a way to do the same thing using the plugin system, which doesn't require messing with the capacitor packages at all: https://stackoverflow.com/questions/68684396/how-can-i-enable-pinch-zooming-with-ionic-capacitor

[ecc521]

@phinjensen Thanks for posting this! A plugin is a much better solution.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.