Question

I would like to include the user-scalable=no option in my web template so that 640px wide devices and below do not scale. The current design scales well at screen sizes larger than 640 but the iPad (with a 1024px wide interface landscape) is obeying the user-scalable option. I want the iPad to behave like a desktop and allow users to zoom. I do not want the iPhone and the Android to zoom.

<meta name="viewport" content="user-scalable=no">

How do I force the iPad, and other mobile devices with a screen width of 640px or larger, into ignoring the user-scalable=no option? Im looking for the same behavior achieved using css media queries where you can specify a range of screen widths to apply the setting to.

Answer 1

I eventually got what I was looking for by using the following:

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