Galaxy Nexus忽略视口元标记

Question

我正在构建一个PhoneGap应用程序。 我的应用程序设计为320px接口。 我在应用中的视口标记是：

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

这在我的Galaxy S2运行冰淇淋三明治上的预期效果。 320px界面填充整个屏幕宽度。

但是，在Galaxy Nexus上测试上述代码时，视口宽度为360px。 所以我的元素没有填满屏幕。 我尝试将以下行添加到Cordova的appname.java文件中：

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

但是，这没有效果。

Answer 1

尝试用这个替换它：

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

它应该调整到特定设备，但我不能测试它。

Answer 2

我看到的答案非常接近，但他们忽略了他提出的一点：他的界面设计为320px。 width = device-width将使其适合屏幕，但这并不能确保他的界面将保持在320px。

我的解决方案只是在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>

此标记的作用是允许您将接口限制为可以通过CSS设置属性的特定容器。 我建议的是这样的：

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

这基本上告诉浏览器，无论元标记视口设置页面宽度，将我的界面放在水平中心（ margin-left & margin-right: auto ）并将其固定为320px宽度（ width: 320px ）。 您可以添加任何样式组合，以获得您真正想要的内容。

希望这可以帮助！

Answer 3

用这个

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

检查此演示文稿以自定义元标记

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