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

问题描述

我目前正在使用一个Phonegap应用程序，当我使用Windows Phone 8测试它时，我有以下问题（左边截图）：应用程序栏没有删除，留下一个大的空白。

从各种 来源我了解到WP8忽略以下元标记：

 < meta name =viewportcontent =width = device-width，height = device-height> 
  

因此，您必须使用ms前缀标记再次定义：

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

但这样做会对应用程序的缩放造成混乱。

解决方案

Index.html，

 < meta name =viewportcontent =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; 
} 
  

这将解决现在的问题， ..！
： - ）

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.

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

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

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?

Here the before after screenshot:

解决方案

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" />

Include this in CSS:

@viewport
{
width:320px;
}

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

and include also this,

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：viewport meta&缩放问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！