视口单元不工作在Cordova移动应用程序



我试图得到响应的网页设计到我的应用程序,使其适应多个屏幕。因此,我在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也会相应调整

最新更新