Question

hey guys, i'm currently building a website optimized for mobile devices.

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

i have a dynamic javascript grid and i want no scaling on mobile devices. the line above works perfectly on the iphone however i think it does not work on android or webos. any idea how i can set a NO-SCALE mode for those mobile devices as well. So there is no pinch & zoom and the device-width is the 100% browser-width?

thank you for your tips.

regards matt

Was it helpful?

Solution

According to http://developer.android.com/guide/webapps/targeting.html#Metadata, the "user-scalable" property needs to be set to "no", not 0. So:

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

EDIT: A bit more info near the bottom of the page at Safari Reference Library - Supported Meta Tags:

user-scalable
Determines whether or not the user can zoom in and out—whether or not the user can change the scale of the viewport. Set to yes to allow scaling and no to disallow scaling. The default is yes.

Setting user-scalable to no also prevents a webpage from scrolling when entering text in an input field.

Available in iOS 1.0 and later.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top