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" />

选中此presentation以自定义元标记

Galaxy Nexus忽略视口元标记

3 个答案: