Galaxy Nexus Ignores viewport meta tag
Question
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.
3 answers
solution1
13 2012-12-15 11:44:56
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.
solution2
5 2012-12-19 14:08:49
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!
solution3
3 2012-12-20 05:07:16
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.