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?

Answer 1

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

Answer 2

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.

Answer 3

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>