Bra*_*oke 15 javascript css android cordova
我正在构建一个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);
但是,这没有效果.
Way*_*eio 13
尝试用这个替换它:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
它应该调整到特定设备,但我不能测试它.
我看到的答案非常接近,但他们忽略了他提出的一点:他的界面设计为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).您可以添加任何样式组合,以获得您真正想要的内容.
希望这可以帮助!
| 归档时间： |
|
| 查看次数： |
2133 次 |
| 最近记录： |