How do you disable viewport zooming on Mobile Safari

Question

I ve tried all three of these to no avail    lt meta name    viewport    content    width device-width  initial-scale 1 0  maximum-scale 1 0  user-scalable 0       gt    lt meta name    viewport    content    width device-width  initial-scale 1 0  maximum-scale 1 0  user-scalable false       gt    lt meta name    viewport    content    width device-width  initial-scale 1 0  maximum-scale 1 0  user-scalable no       gt    each are different values I found recommended by google searching or SO searching  but none of the  user-scalable X  values seem to be working  I also tried comma delimiting the values instead of semicolon  no luck  Then I tried ONLY having the user-scalable value present  still no luck     UPDATE  Got this from Apple s site and it works    lt meta name  viewport  content  width device-width  user-scalable no    gt    it turns out that the problem was the non-standard quotes because I had copied the meta tag from a website that was using them  whoops

User · Answer

Using the CSS touch-action property is the most elegant solution  Tested on iOS 13 5 and iOS 14  To disable pinch zoom gestures and and double-tap to zoom  body     touch-action  pan-x pan-y     If your app also has no need for panning  i e  scrolling  use this  body     touch-action  none

User · Answer

user-scalable 0   This no longer works on iOS 10  Apple removed the feature   There is no way yo can disable zoom website on iOS now  unless you make gross platform app

User · Answer

This works fine in IOS 10 3 2       document addEventListener  touchmove   function event            event   event originalEvent    event          if  event scale     1               event preventDefault                     false     thank you  arthur and  aleclarson

User · Answer

mattis is correct that iOS 10 Safari won t allow you to disable pinch to zoom with the user-scalable attribute  However  I got it to disable using preventDefault on the  gesturestart  event  I ve only verified this on Safari in iOS 10 0 2   document addEventListener  gesturestart   function  e        e preventDefault

User · Answer

In order to comply with WAI WCAG 2 0 AA accessibility requirements you must never disable pinch zoom    WCAG 2 0  SC 1 4 4 Resize text Level AA    You can read more about it here   Mobile Accessibility  How WCAG 2 0 and Other W3C WAI Guidelines Apply to Mobile  2 2 Zoom Magnification

User · Answer

for iphones safari up to iOS 10  viewport  is not a solution  i don t like this way  but i have used this javascript code and it helped me   document addEventListener  touchmove   function event        event   event originalEvent    event      if event scale  gt  1          event preventDefault               false

User · Answer

I managed to stop this behavior by adding the following to the HTML header  This works on mobile devices  as desktop browsers support zooming when using the mouse wheel  It s not a big deal on desktop browsers but it s important to take this into account    x000D   x000D   lt meta name  viewport  content  width device-width  initial-scale 1 0  minimum-scale 1 0  maximum-scale 1 0  user-scalable no    gt  x000D   x000D   x000D    and the following rule to the CSS stylesheet   x000D   x000D  html   x000D   -webkit-text-size-adjust  none  x000D   touch-action  manipulation  x000D    x000D   x000D   x000D

User · Answer

I foolishly had a wrapper div which had a width measured in pixels   The other browsers seemed to be intelligent enough to deal with this   Once I had converted the width to a percentage value  it worked fine on Safari mobile as well  Very annoying    page width  960px     to    page width 93 75     lt div id  divPage  class  page  gt   lt  div gt

User · Answer

I got it working in iOS 12 with the following code   if   iPad iPhone iPod  test navigator userAgent       window document addEventListener  touchmove   e   gt        if e scale     1          e preventDefault                passive  false        With the first if statement I ensure it will only execute in iOS environments  if it executes in Android the scroll behivour will get broken   Also  note the passive option set to false

User · Answer

As mentioned this solution basically works as of late 2020  document addEventListener       gesturestart    e    gt  e preventDefault       But the downside is that while you are scrolling you d still be able to pinch and then it gets stuck  The solution is to disable scrolling  body       overflow  hidden     But  what if you still wanted the page to be scrolled  You can still do it with another  lt div gt  set as overflow auto   lt body gt       lt div id  app  gt  lt  div gt   lt  div gt   and then body       overflow  hidden       app        -webkit-overflow-scrolling  touch        height  100vh        height  -webkit-fill-available        overflow  auto

User · Answer

sometimes those other directives in the content tag can mess up Apple s best guess heuristic at how to layout your page  all you need to disable pinch zoom is    lt meta name  viewport  content  user-scalable no    gt

User · Answer

This one should be working on iphone etc    lt meta name  viewport  content  width device-width  initial-scale 1 initial-scale 1 0  maximum-scale 1 0  user-scalable no  gt

User · Answer

Your code is displaying attribute double quotes as fancy double quotes  If the fancy quotes are present in your actual source code I would guess that is the problem   This works for me on Mobile Safari in iOS 4 2    lt meta name  viewport  content  width device-width  initial-scale 1 0  maximum-scale 1 0  user-scalable no    gt

User · Answer

For the people looking for an iOS 10 solution  user-scaleable no is disabled in Safari for iOS 10  The reason is that Apple is trying to improve accessibility by allowing people to zoom on web pages   From release notes      To improve accessibility on websites in Safari  users can now   pinch-to-zoom even when a website sets user-scalable no in the   viewport    So as far as I understand  we are sh   out of luck

User · Answer

Actually Apple disabled user-scalable no on latest iOS versions  I tried as guideline and this way can work  body     touch-action  pan-x pan-y

User · Answer

Try adding the following to your head-tag    lt meta name  viewport  content  width device-width  initial-scale 1 0   minimum-scale 1 0  maximum-scale 1 0  user-scalable no  gt    additionally   lt meta name  HandheldFriendly  content  true  gt    Finally  either as a style-attribute or in your css file  add the following text for webkit-based Browsers   html       -webkit-text-size-adjust  none

User · Answer

In Safari 9 0 and up you can use shrink-to-fit in viewport meta tag as shown below   lt meta name  viewport  content  width device-width  initial-scale 1 0  shrink-to-fit no  gt

[html] How do you disable viewport zooming on Mobile Safari?

Examples related to html

Examples related to ios

Examples related to mobile-safari

Examples related to viewport

Examples related to zoom-sdk