Phonegap + Windows Phone 8：视口meta和缩放问题

Question

Phonegap + Windows Phone 8：视口meta和缩放问题

5

我目前正在开发一个Phonegap应用程序，在使用Windows Phone 8进行测试时遇到了以下问题（下图中的左侧截图）：应用程序栏没有被移除，留下了一个大的白色空间。

我从不同的来源了解到，以下meta标签在WP8上被忽略：

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

所以，您需要再次使用“ms”预标记来定义它：

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

但这样做会有点影响应用程序的缩放。你知道发生了什么吗？

以下是之前和之后的截图：

- Timothée Bourguignon

这可能会有所帮助：[https://dev59.com/YHLYa4cB1Zd3GeqPX3Fj?rq=1]。[[1](http://trentwalton.com/2013/01/16/windows-phone-8-viewport-fix/)] - Xareyo

我也尝试过了，可惜对我没用。 - Timothée Bourguignon

viewport 元标记并未被忽略，WordPress 只是（有意地）返回了错误的 device-width 和 device-height 值，通常会导致缩放因子为 1.5 以获得更好的可读性。 - Cedric Reichenbach

@CedricReichenbach，这个问题有解决方案吗？ - Timothée Bourguignon

1

不是很简单，你可以始终为device-width和device-height设置明确的值，对于所有WP7和大多数WP8设备来说，这将是480/800。我一直在尝试从本机应用程序代码动态插入视口元标记（显然知道其屏幕尺寸），但动态元标记更改似乎被浏览器忽略。另请参见我的相关问题，特别是底部的更新。 - Cedric Reichenbach

3个回答

2

您可以将此代码添加到您的CSS中：

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

这对我解决了问题。

- Enny

1

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

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

- locknies

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- locknies · Accepted Answer

将此内容包含在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; 
}

这暂时解决了问题，在我遇到相同情况时它对我起作用了..!! :-)