Disable Pinch Zoom on Mobile Web

html css mobile-website viewport
Harsha M V picture Harsha M V · Jul 27, 2012 · Viewed 137.3k times · Source

I want to disable Pinch and Zoom on Mobile devices.

What configuration should I add to the viewport ?

Link : http://play.mink7.com/n/dawn/

Answer

SpaceBeers picture SpaceBeers · Jul 27, 2012

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

Related questions

Difference between visual viewport and layout viewport?

What is the Difference between visual viewport and layout viewport for a mobile device like iPhone/iPad? I have gone through a lot of online resources, but am still unclear about it.

Read More
Why are my CSS3 media queries not working?

In the styles.css, I am using media queries, both of which use a variation of: /*--[ Normal CSS styles ]----------------------------------*/ @media only screen and (max-width: 767px) { /*--[ Mobile styles go here]---------------------------*/ } The sites resize to the layout I …

Read More
Tips for optimizing a website for Android's browser?

I'm looking for tips, tricks and resources on optimizing a website design for Android's browser. I'm building an Android app and some of the functionality will be accessible through a web interface.

Read More