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.
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.
Share Improve this question edited Dec 20, 2012 at 16:04 Mechlar 4,97414 gold badges60 silver badges83 bronze badges asked Dec 3, 2012 at 1:43 user72381user72381 1- 2 In your viewport, content="width=320" please change this to width=device-width – thomasbabuj Commented Dec 19, 2012 at 3:55
3 Answers
Reset to default 13 +25Try 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.
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!
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