Search code examples
iphoneandroidcsswebos

android and webos no content scaling?

I am 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. How can I 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?

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.