Ionic , is it possible to pinch zoom page like web on mobile?

Ionic Framework
1

Hi :slight_smile: I’m developing app with ionic4 but wondering if there’s any chance that ionic app also can be pinched zoom in - out just like chrome web browser on mobile devices…

I thought ionic is webview based hybrid app, so it basically implemented but it’s not work as I expected.

how can I pinch zoom in out ionic app’s page?

ichanged index.html like below
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">
but it’s not working on real device

2 Likes
2

I have the same problem! Can someone help us?

3

Same issue here

Updating the meta viewport does not allow zooming in Chrome on Android

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=0.86, minimum-scale=0.86, maximum-scale=12.0, user-scalable=yes">
4

I could not get it to work either but I am using https://ionicframework.com/docs/native/photo-viewer now.
Instead of pinching I am binding the photo-viewer to a click event and do the pinching in the opened photo-viewer afterwards.

This is working only for images though!

5

Hello everyone.
Did anyone solve this? I am facing the same issue: build a web app (so simple “ionic build”), to be opened on desktop and mobile, but I would like to allow mobile web users to zoom the whole page using pinch (like most regular websites).
The meta tag user-scalable=yes is being ignored and I don’t get why…

Thanks!

6

The same issue. The pinch zoom works fine in iOS app, but not in android.
I have this:

Is there no way yet?
7

I have the same issue. Any ideas?

8

Any one found the solution ? I tried with hammer js… doesn’t give decent graphics.

9

You could try using the Angular pinch-zoom package:

npm i ngx-pinch-zoom

<ion-content scrollX="true" scrollY="true">
   <pinch-zoom [properties]="zoomProperties">
     <ion-grid>
       ....contents.. 
     </ion-grid>
   </pinch-zoom>
</ion-content>

You can set up your properties through a variable:

zoomProperties = {
  "double-tap": true, // double tap to zoom in and out.
  "overflow": "hidden",// Am not sure. But Documentation says, it will not render elements outside the container.
  "wheel": false, // Disables mouse - To enable scrolling. Else mouse scrolling will be used to zoom in and out on web.
  "disableZoomControl": "disable", // stops showing zoom + and zoom - images.
  "backgroundColor": "rgba(0,0,0,0)" // Makes the pinch zoom container color to transparent. So that ionic themes can be applied without issues.
 }

Don’t forget to import modules for the package into your project.

10

I use Hammer.js and svg-pan-zoom and everything works fine, I can zoom, pinch etc

11

Doesn’t work with mobile app

12

my solutions works fine: i’m using it in my apps since 2018

13

svg-pan-zoom not zooming html element. actually trying to imitate bowser zoom in mobile app
error

14

Any solution for zooming html element , using hammerjs to increase font based on pinch event. Doesn’t give proper graphics. Also {zoom:1.5} giving proper zoom , but not sure about limitation