Disable Pinch Zoom on Mobile Web

Question

I want to disable Pinch and Zoom on Mobile devices.

What configuration should I add to the viewport ?

Link : http://play.mink7.com/n/dawn/

Answer 1

EDIT: Because this keeps getting commented on, we all know that we shouldn't do this. The question was how do I do it, not should I do it.

Add this into your for mobile devices. Then do your widths in percentages and you'll be fine:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Add this in for devices that can't use viewport too:

<meta name="HandheldFriendly" content="true" />

Answer 2

this will prevent any zoom action by the user in ios safari and also prevent the "zoom to tabs" feature:

document.addEventListener('gesturestart', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
});

document.addEventListener('gesturechange', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
});

document.addEventListener('gestureend', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
});

jsfiddle: https://jsfiddle.net/vo0aqj4y/11/

Answer 3

This is all I needed:

<meta name="viewport" content="user-scalable=no"/>

Answer 4

I think what you may be after is the CSS property touch-action. You just need a CSS rule like this:

html, body {touch-action: none;}

You will see it has pretty good support (https://caniuse.com/#feat=mdn-css_properties_touch-action_none), including Safari, as well as back to IE10.

Answer 5

To everyone who said that this is a bad idea I want to say it is not always a bad one. Sometimes it is very boring to have to zoom out to see all the content. For example when you type on an input on iOS it zooms to get it in the center of the screen. You have to zoom out after that cause closing the keyboard does not do the work. Also I agree that when you put many I hours in making a great layout and user experience you don't want it to be messed up by a zoom.

But the other argument is valuable as well for people with vision issues. However In my opinion if you have issues with your eyes you are already using the zooming features of the system so there is no need to disturb the content.

Answer 6

Unfortunately, the offered solution doesn't work in Safari 10+, since Apple has decided to ignore user-scalable=no. This thread has more details and some JS hacks: disable viewport zooming iOS 10+ safari?

Answer 7

Found here you can use user-scalable=no:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Answer 8

IE has its own way: A css property, -ms-content-zooming. Setting it to none on the body or something should disable it.

Disable pinch to zoom in IE10

http://msdn.microsoft.com/en-us/library/ie/hh771891(v=vs.85).aspx

Answer 9

For anyone still needing this feature, none of the other answers work in newer versions of the iOS. You only need to add this CSS code to the CSS Inline section of your Apex page:

@media screen and (-webkit-min-device-pixel-ratio: 0) {

.apex-item-select:focus, .apex-item-text:focus, .apex-item-textarea:focus {

        font-size: 16px;

    }

    .apex-item-select, .apex-item-text, .apex-item-textarea {

        font-size: 16px;

    }

}

It completely fixes the auto-zoom-in problem in the iOS devices.

Answer 10

Disables iOS pinch-zoom

window.addEventListener(
  "touchmove",
  function (event) {
    if (event.scale !== 1) {
      event.preventDefault();
      event.stopImmediatePropagation();
    }
  },
  { passive: false }
);

Tested on iOS 15.3 in Safari and Brave.

Answer 11

Try with min-width property. Let me explain you. Assume a device with screen width of 400px (for an instance). When you zoom in, the fonts gets larger and larger. But boxes and divs remains with same width. If you use min-width, you can avoid decreasing your div and box.

Answer 12

Not sure is this could help, but I solved the pinch / zoom problem (I wanted to avoid users to do zooming on my webapp) using angular hammer module:

In my app.component.html I added:

<div id="app" (pinchin)="pinchin();">

and in my app.component.ts:

  pinchin() {
      //console.log('pinch in');
  }