Phonegap + Windows Phone 8:viewport meta&扩展问题

时间:2013-12-09 16:50:31

标签: css html5 cordova windows-phone-8

我目前正在开发一个Phonegap应用程序,在使用Windows Phone 8进行测试时遇到以下问题(左下方截图):应用程序栏未被删除,并留下很大的空白区域。

various sources我了解到WP8忽略了以下元标记:

<meta name="viewport" content="width=device-width, height=device-height">

所以你必须使用“ms”预标签再次定义它:

@-ms-viewport {
    height: device-height;
    width: device-width;
}

但这样做会让应用程序缩放变得混乱。知道发生了什么事吗?

这里是之前的截图:

before-after

3 个答案:

答案 0 :(得分:10)

在Index.html中包含此内容,

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />

将其包含在CSS中:

@viewport
{
width:320px;
}

@-ms-viewport {
width:320px;
zoom-user:fixed;
max-zoom:1;
min-zoom:1;
}

并包含此内容,

body, html { 
  -ms-overflow-style: none !important; 
}

这将解决现在的问题,它在同样的情况下对我有用.. !! : - )

答案 1 :(得分:2)

您可以将此代码带到您的css:

* {
    zoom:1;
    -ms-content-zooming:none;
}

这解决了我的问题。

答案 2 :(得分:1)

有一个可用于视口修复的插件:

http://plugreg.com/plugin/lisovin/cordova-wp8-viewport