How can I disable zoom on a mobile web page

Question

I am creating a mobile web page that is basically a big form with several text inputs   However  at least on my Android cellphone   every time I click on some input the whole page zooms there  obscuring the rest of the page  Is there some HTML or CSS command to disable this kind of zoom on moble web pages

User · Answer

You can accomplish the task by simply adding the following 'meta' element into your 'head':

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

Adding all the attributes like 'width','initial-scale', 'maximum-width', 'maximum-scale' might not work. Therefore, just add the above element.

User · Answer

The solution using a meta-tag did not work for me  tested on Chrome win10 and safari IOS 14 3   and I also believe that the concerns regarding accessibility  as mentioned by Jack and others  should be honored  My solution is to disable zooming only on elements that are damaged by the default zoom  I did this by registering event listeners for zoom-gestures and using event preventDefault   to suppress the browsers default zoom-behavior  This needs to be done with several events  touch gestures  mouse wheel and keys   The following snippet is an example for the mouse wheel and pinch gestures on touchpads  noteSheetCanvas addEventListener  quot wheel quot   e   gt               suppress browsers default zoom-behavior          e preventDefault                execution my own custom zooming-behavior          if  e deltaY  gt  0                this  zoom 1             else               this  zoom -1                      How to detect touch gestures is described here  https   stackoverflow com a 11183333 1134856 I used this to keep the standard zooming behavior for most parts of my application and to define custom zooming-behavior on a canvas-element

User · Answer

There are a number of approaches here- and though the position is that typically users should not be restricted when it comes to zooming for accessibility purposes  there may be incidences where is it required   Render the page at the width of the device  dont scale    lt meta name  viewport  content  width device-width  initial-scale 1 0  gt    Prevent scaling- and prevent the user from being able to zoom    lt meta name  viewport  content  width device-width  initial-scale 1  maximum-scale 1  user-scalable no  gt    Removing all zooming  all scaling   lt meta name  viewport  content  user-scalable no  initial-scale 1  maximum-scale 1  minimum-scale 1  width device-width  height device-height  target-densitydpi device-dpi    gt

User · Answer

For those of you late to the party  kgutteridge s answer doesn t work for me and Benny Neugebauer s answer includes target-densitydpi  a feature that is being deprecated    This however does work for me     lt meta name  viewport  content  width device-width  initial-scale 1 0  maximum-scale 1 0  user-scalable no    gt

User · Answer

lt script type  text javascript  gt  document addEventListener  touchmove   function  event      if  event scale     1    event preventDefault           passive  false      lt  script gt    Please Add the Script to Disable  pinch  tap  focus Zoom

User · Answer

This should be everything you need    lt meta name  viewport        content  width device-width  initial-scale 1 0  maximum-scale 1 0        user-scalable 0   gt

User · Answer

document addEventListener  dblclick    event    gt        event preventDefault        passive  false

User · Answer

Possible Solution for Web Apps  While zooming can not be disabled in iOS Safari anymore  it will be disabled when opening the site from a home screen shortcut  Add these meta tags to declare your App as  quot Web App capable quot        lt meta content  quot width device-width  initial-scale 1 0  maximum-scale 1 0  user-scalable no quot  name  quot viewport quot   gt       lt meta name  quot apple-mobile-web-app-capable quot  content  quot yes quot   gt   However only use this feature if your app is self sustaining  as the forward backward buttons and URL bar as well as the sharing options are disabled   You can still swipe left and right though  This approach however enables quite the app like ux  The fullscreen browser only starts when the site is loaded from the homescreen  I also only got it to work after I included an apple-touch-icon-180x180 png in my root folder  As a bonus  you probably also want to include a variant of this as well   lt meta name  quot apple-mobile-web-app-status-bar-style quot  content  quot black-translucent quot  gt

User · Answer

Seems like just adding meta tags to index html doesn t prevent page from zooming  Adding below style will do the magic     root     touch-action  pan-x pan-y    height  100       EDIT  Demo  https   no-mobile-zoom stackblitz io

User · Answer

You can use    lt head gt     lt meta name  viewport  content  target-densitydpi device-dpi  initial-scale 1 0  user-scalable no    gt         lt  head gt    But please note that with Android 4 4 the property target-densitydpi is no longer supported  So for Android 4 4 and later the following is suggested as best practice    lt meta name  viewport  content  width device-width  initial-scale 1  user-scalable no    gt

User · Answer

Since there is still no solution for initial issue  here s my pure CSS two cents   Mobile browsers  most of them  require font-size in inputs to be 16px  So   x000D   x000D  input type  text    x000D  input type  number    x000D  input type  email    x000D  input type  tel    x000D  input type  password     x000D    font-size  16px  x000D    x000D   x000D   x000D    solves the issue  So you don t need to disable zoom and loose accessibility features of you site   If your base font-size is not 16px or not 16px on mobiles  you can use media queries    x000D   x000D   media screen and  max-width  767px    x000D    input type  text    x000D    input type  number    x000D    input type  email    x000D    input type  tel    x000D    input type  password     x000D      font-size  16px  x000D      x000D    x000D   x000D   x000D

User · Answer

please try adding this meta-tag and style    lt meta content  width device-width  initial-scale 1 0  maximum-scale 1 0  user-scalable no  name  viewport   gt     lt style gt  body          touch-action  manipulation         lt  style gt

[html] How can I "disable" zoom on a mobile web page?

Examples related to html

Examples related to css

Examples related to mobile