CODEWITHSUNDEEP
javascriptandroidcsscordova
user72381
user72381

Reputation:

Galaxy Nexus Ignores viewport meta tag

I am building a PhoneGap app. My app is designed as a 320px interface. My viewport tag within the app is:

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

This works as expected on my Galaxy S2 running Ice Cream Sandwich. The 320px interface fills the entire width of the screen.

However, when testing the above code on a Galaxy Nexus, the viewport is 360px wide. So my elements do not fill the screen. I have tried adding the following line to my Cordova's appname.java file:

this.appView.getSettings().setUseWideViewPort(true);

However, this has no effect.

Upvotes: 15

Views: 2186

Answers (3)

Ranganadh Paramkusam
Ranganadh Paramkusam

Reputation: 4368

Use this 

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

Check this presentation for customizing meta tag

Upvotes: 3

akamaozu
akamaozu

Reputation: 705

The answers I see are super close but they're ignoring one point he brought up: his interface is designed for 320px. width=device-width will make it fit to screen, but that doesn't ensure his interface will stay at 320px.

My solution is just building a little bit on Wayneio's answer, providing the necessary CSS / markup to ensure you need only one stylesheet (and that it doesn't need to be a responsive one).

<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
</head>
<body>
    <div id="interfaceWrap">
        // insert interface here
    </div>
</body>
</html>

What this markup does is allows you to confine your interface to a specific container that you can set properties to via CSS. What I would recommend is something like this:

#interfaceWrap {
    position: relative;
    width: 320px;
    margin-left: auto;
    margin-right: auto;
}

This basically tells the browser that no matter meta-tag viewport sets the page width to, place my interface in the horizontal center (margin-left & margin-right: auto) and keep it fixed to 320px width (width: 320px). You can add any combination of styles to get what you're truly looking for.

Hope this helps!

Upvotes: 5

Wayneio
Wayneio

Reputation: 3566

Try replacing it with this:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

It should resize to the specific device, however I can't test this.

Upvotes: 13

Related Questions