我试图得到响应的网页设计到我的应用程序,使其适应多个屏幕。因此,我在css中使用视口单位(vw和vh)来处理从字体大小到页边距的所有内容。但是cordova webview不支持viewport单元。我被困在这里了。
是否有办法让vh和vw单位在cordova webview上工作?或是否有其他的方式得到响应的网页设计为我的应用程序,使我可以发布它跨多个屏幕(android)。
我得到了js解决方案,它在cordova应用程序中工作得很好
代码: var w=$(window).width()/100;
var h=$(window).height()/100;
function vw( val ) {
return w*val+'px';
}
function vh( val ) {
return h*val+'px';
}
$('.header p').css({
fontSize: vw(4),
marginTop: vh(2)
});
很简单,不是吗?
如果您尝试过:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
那么试试这个:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
根据我的理解,一些早期版本的Android和IOS不支持视口单元http://caniuse.com/viewport-units
我将使用em代替视口单位,我将添加一些媒体查询到html标签来操纵字体大小。单位" em "是相对的所以如果我改变html的font-size它的子元素的font-size也会相应调整