0

I was following this guide to disable zoom for mobile devices.

https://davidwalsh.name/zoom-mobile-browsers

As many others have suggested the guide suggests using:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> <!--320-->

I've tried this and several variations with the viewport and I cannot get it to work. Also when looking at the example from the guide I followed I realized it also doesn't work.

https://davidwalsh.name/demo/mobile-viewport.php

Any thoughts on why this is not working and any suggestions on how to make it work would be greatly appreciated!

AndrewLeonardi
  • 2,735
  • 7
  • 36
  • 72

2 Answers2

5

Your code is ok, the problem is iOS specific. Quoted from another question here on stackoverflow:

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.

See the whole thread here: How do you disable viewport zooming on Mobile Safari?

Or this one: disable viewport zooming iOS 10 safari?

Community
  • 1
  • 1
ARS81
  • 2,894
  • 3
  • 20
  • 27
0

This one should work:

<!DOCTYPE html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
ARS81
  • 2,894
  • 3
  • 20
  • 27
  • Than maybe some of your html element is wider than 100%. Try to fix it by commenting out (temporarily remove) all your html inside the `` tag and then put it back one by one. Or at first try with a really simple body content like `

    Hello

    ` and try zooming. If it's ok (cannot be zoomed) with minimal body content then the bug is somewhere in your html code.     – ARS81 Apr 29 '17 at 21:32
  • Also disable any css when testing the above. Maybe a css rule is messing with the html or the body tag. – ARS81 Apr 29 '17 at 21:47
  • hmm I'll give it a shot! I am curious why the example I was using also wasn't working. Check the link above on mobile – AndrewLeonardi Apr 29 '17 at 21:56
  • For me the demo link works on Android as it should be: no zooming allowed. – ARS81 Apr 29 '17 at 23:06