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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    lt meta name  viewport  content  width device-width  initial-scale 1 0  maximum-scale 1 0  user-scalable no    gt    Add this in for devices that can t use viewport too    lt meta name  HandheldFriendly  content  true    gt

User · Answer

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

User · Answer

This is all I needed        lt meta name  viewport  content  user-scalable no   gt

User · Answer

Found here you can use user-scalable no    lt meta name  viewport  content  width device-width  initial-scale 1 0  user-scalable no  gt

User · Answer

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   lt div id  quot app quot   pinchin   quot pinchin    quot  gt   and in my app component ts    pinchin             console log  pinch in

[html] Disable Pinch Zoom on Mobile Web

Examples related to html

Examples related to css

Examples related to mobile-website

Examples related to viewport