15

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

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

这在我运行 Ice Cream Sandwich 的 Galaxy S2 上按预期工作。320px 的界面填满了屏幕的整个宽度。

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

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

但是，这没有效果。

4

3 回答 3

13

尝试用这个替换它：

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

它应该调整到特定设备的大小，但是我无法对此进行测试。

于 2012-12-15T11:44:56.290 回答
5

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

我的解决方案只是在 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）。您可以添加任何样式组合以获得您真正想要的。

希望这可以帮助！

于 2012-12-19T14:08:49.977 回答
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

于 2012-12-20T05:07:16.793 回答