Galaxy Nexus忽略视口元标记

Question

I am building a PhoneGap app. 我正在构建一个PhoneGap应用程序。 My app is designed as a 320px interface. 我的应用程序设计为320px接口。 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. 这在我的Galaxy S2运行冰淇淋三明治上的预期效果。 The 320px interface fills the entire width of the screen. 320px界面填充整个屏幕宽度。

However, when testing the above code on a Galaxy Nexus, the viewport is 360px wide. 但是，在Galaxy Nexus上测试上述代码时，视口宽度为360px。 So my elements do not fill the screen. 所以我的元素没有填满屏幕。 I have tried adding the following line to my Cordova's appname.java file: 我尝试将以下行添加到Cordova的appname.java文件中：

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

However, this has no effect. 但是，这没有效果。

Answer 1

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. 它应该调整到特定设备，但我不能测试它。

Answer 2

The answers I see are super close but they're ignoring one point he brought up: his interface is designed for 320px. 我看到的答案非常接近，但他们忽略了他提出的一点：他的界面设计为320px。 width=device-width will make it fit to screen, but that doesn't ensure his interface will stay at 320px. width = device-width将使其适合屏幕，但这并不能确保他的界面将保持在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). 我的解决方案只是在Wayneio的答案上构建一点，提供必要的CSS /标记，以确保您只需要一个样式表（并且它不需要是响应式样式表）。

<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. 此标记的作用是允许您将接口限制为可以通过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 ). 这基本上告诉浏览器，无论元标记视口设置页面宽度，将我的界面放在水平中心（ margin-left & margin-right: auto ）并将其固定为320px宽度（ width: 320px ）。 You can add any combination of styles to get what you're truly looking for. 您可以添加任何样式组合，以获得您真正想要的内容。

Hope this helps! 希望这可以帮助！

Answer 3

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 检查此演示文稿以自定义元标记

Galaxy Nexus忽略视口元标记

问题描述

3 个解决方案

解决方案1
13 2012-12-15 11:44:56

解决方案2
5 2012-12-19 14:08:49

解决方案3
3 2012-12-20 05:07:16

Galaxy Nexus忽略视口元标记

问题描述

3 个解决方案

解决方案1 13 2012-12-15 11:44:56

解决方案2 5 2012-12-19 14:08:49

解决方案3 3 2012-12-20 05:07:16

解决方案1
13 2012-12-15 11:44:56

解决方案2
5 2012-12-19 14:08:49

解决方案3
3 2012-12-20 05:07:16