Skip to content

Android Applications are Not Zoomable #4620

@ecc521

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions