Disable Zoom on mobile devices

Issue

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!

Solution

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?

Answered By - szegheo