CODEWITHSUNDEEP
htmliosasp.netiphone
Vinayaka N
Vinayaka N

Reputation: 123

How to disable zoom in mobile responsive?

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?

Upvotes: 3

Views: 5768

Answers (2)

GiuServ
GiuServ

Reputation: 1235

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.

Upvotes: 0

user4990188
user4990188

Reputation:

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

You can find more here

Upvotes: 2

Related Questions