How to "Disable" Zoom on a Mobile Web Page

Disable Zoom on mobile devices

Your code is ok, the problem is iOS specific. Quoted from another question here on stackoverflow:

For the people looking for an iOS 10 solution, user-scaleable=no is
disabled in Safari for iOS 10. The reason is that Apple is trying to
improve accessibility by allowing people to zoom on web pages.

See the whole thread here:
How do you disable viewport zooming on Mobile Safari?

Or this one:
disable viewport zooming iOS 10 safari?

Disable Pinch Zoom on Mobile Web

EDIT: Because this keeps getting commented on, we all know that we shouldn't do this. The question was how do I do it, not should I do it.

Add this into your for mobile devices. Then do your widths in percentages and you'll be fine:

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

Add this in for devices that can't use viewport too:

<meta name="HandheldFriendly" content="true" />

How do you disable viewport zooming on Mobile Safari?

Edit: may not work after iOS 10, please see touch-action based solution below.

Your code is displaying attribute double quotes as fancy double quotes. If the fancy quotes are present in your actual source code I would guess that is the problem.

This works for me on Mobile Safari in iOS 4.2.

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

How do I disable zoom in or out web page in mobile view?

Try to use this:

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

But I think your question duplicate with:

How can I "disable" zoom on a mobile web page?

---

Related Topics