How to disable zooming capabilities in responsive design?

Question

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?

http://stackoverflow.com/questions/4472891/how-can-i-disable-zoom-on-a-mobile-web-page — Salman, Nov 04 '12 at 05:12

score 56 · Accepted Answer · edited Aug 22 '15 at 12:15

56

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">

edited Aug 22 '15 at 12:15

Mo.

26,306
36
159
225

answered Nov 05 '12 at 02:19

Adam Stanley

1,875
1
15
16

5

thanks you very much, using like this with your help `` – Mo. Nov 05 '12 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 '16 at 04:15
1

Side note: This doesn't prevent double-tap zooming. – aleclarson Apr 30 '17 at 02:59

score 0 · Answer 2 · answered Mar 30 '16 at 00:29

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.

answered Mar 30 '16 at 00:29

mckenzm

1,545
1
12
19

Thank you very much for your advice, Just changed the question title – Mo. Mar 30 '16 at 05: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 '17 at 01: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 '18 at 05: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 '18 at 11:35

score 0 · Answer 3 · edited Apr 12 '20 at 08:45

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>

edited Apr 12 '20 at 08:45

Piotr Labunski

1,638
4
19
26

answered Apr 12 '20 at 05:11

Prem

153
1
7

How to disable zooming capabilities in responsive design?

3 Answers3

Linked