How to disable zoom in mobile responsive?

Question

I have written this code for disabling zoom in or out:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="HandheldFriendly" content="true" />

It is working fine in all mobile phones except in recent iphones (ex: iphone 6, iphone 7), where this function not working. Where did I make a mistake?

Answer 1

There is nothing wrong with your code, it's just IOS 10 doesn't support it

You can find more here

Answer 2

I finally figured out how to prevent it on ios 10.
First, i found an article where it says that since ios 10, the use of viewport meta is kinda ignored from safari; here's the link.

Then, that's the solution i found out as workaround:

$(this).on('touchmove', function (event) {
    if (event.originalEvent.scale !== 1) {
        event.preventDefault();
        event.stopPropagation();
    }
});

Notes:

• event.preventDefault(); should works by itself without using event.stopPropagation();. I added it just to be sure other elements won't catch the pinch.
• I tested it on ipad and iphone, and it works good.
• I also used the <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" > for the other devices.