Phonegap + Windows Phone 8:视口元缩放问题 [英] Phonegap + Windows Phone 8 : viewport meta & scaling issue

问题描述

我目前正在开发 Phonegap 应用程序，在使用 Windows Phone 8 测试时遇到以下问题(下方左侧屏幕截图):应用程序栏未移除并留下很大的空白.

I'm currently working on a Phonegap app and I have the following problem when testing it with Windows Phone 8 (left screenshot below): the application bar is not removed and leaves a big white space.

来自各种 sources 我了解到以下元标记被忽略WP8:

From various sources I learned that the following meta tag is ignored by WP8:

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

因此您必须使用ms"预标记再次定义它:

So you have to define it again using the "ms" pre-tag:

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

但是这样做会影响应用程序的扩展.知道发生了什么吗?

But doing so kind of messes up with the scaling of the app. Any idea what is going on?

这里是前后截图:

推荐答案

Include this in Index.html,

Include this in 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 中:

Include this in CSS:

@viewport
{
width:320px;
}

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

也包括这个，

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

这将暂时解决问题，它在同样的情况下对我有用..！！:-)

This will solve the issue for now, it worked for me in the same situation..!! :-)

这篇关于Phonegap + Windows Phone 8:视口元缩放问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！