CODEWITHSUNDEEP
javahtmliphonemobileviewport
AndrewLeonardi
AndrewLeonardi

Reputation: 3512

Disable Zoom on mobile devices

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!

Upvotes: 0

Views: 5180

Answers (3)

Adem
Adem

Reputation: 61

I made a simple application. I chance style with max-zoom: 3;

Note; max-zoom: 3 code run for disable double click. This note is true even if min-zoom: 3 is added.

Upvotes: 0

szegheo
szegheo

Reputation: 4435

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?

Upvotes: 5

szegheo
szegheo

Reputation: 4435

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>

Upvotes: 0

Related Questions