21

How can I disable zoom-in and zoom-out capability in responsive design pages while using iPad, iPhone and/or some other smartphone.

Is there any way to control it?

1

3 Answers 3

54

Create a META viewport tag, and set the user-scalable property to 'no', like this:

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

Updated answer:-

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
3
  • 5
    thanks you very much, using like this with your help <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    – Mo.
    Nov 5, 2012 at 11:01
  • 2
    Correct answer... but use this and you'll take basic functionality away, possibly making your site unusable for people with vision problems.
    – Webveloper
    Mar 24, 2016 at 4:15
  • 1
    Side note: This doesn't prevent double-tap zooming.
    – aleclarson
    Apr 30, 2017 at 2:59
0

This pretty much discriminates against anyone over 30, suppressing zoom just forces them to use reading glasses. Which may be your intent.

One of the workarounds for such users is to use RDP or VNC to view a desktop browser and "pinch" the view of that.

Question should maybe read "how to disable" or "how to suppress". You should of course discern your devices using the user agent string.

4
  • Thank you very much for your advice, Just changed the question title
    – Mo.
    Mar 30, 2016 at 5:50
  • 1
    I'm 45 and I can read StackOverflow's tiny text. Isn't this what accessibility settings on your phone are for? To override the page specially for you, not force a designer into bloated code for just a few people?
    – pathfinder
    May 20, 2017 at 1:26
  • "People above 30 cannot read text on mobile", is pretty discriminating assumption in itself. I am above 30 and I can read SMS on normal font size from 4 feet away.
    – Ejaz
    Jul 16, 2018 at 5:59
  • SMS, but try the fine print on Amazon, then try zooming in and having the page adapt and move the fields of importance to you. Basically I am saying the pages should be standardised and the device should cope. There are some shocking sites out there, as bad as WAP days.
    – mckenzm
    Jul 17, 2018 at 11:35
0

To Disable Zoom Please Add this Script

<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.