Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable Pinch Zoom on Mobile Web

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/

like image 657
Harsha M V Avatar asked Jul 27 '12 14:07

Harsha M V


People also ask

How do you disable enable pinch zoom for your web app?

To disable pinch-zoom in HTML, simply add <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> to the <head> section.

How do you turn off zoom on input focus on mobile devices?

Solution 1Set the window and body to a size that fills the screen-space, without exceeding it. This is why so many people have success with forcing input text-size to 16px; once you do that, its clear that you're WAY zoomed out.


2 Answers

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" /> 
like image 107
SpaceBeers Avatar answered Oct 12 '22 01:10

SpaceBeers


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/

like image 41
trias Avatar answered Oct 12 '22 00:10

trias