Windows Phone 8升级至8.0.10328.78后，HTML5视口高度大于屏幕高度。

Question

我正在开发一个现有的Cordova应用程序，想要将其移植到Windows Phone 8。在修复了一些渐变和视口问题后，似乎一切都正常了。昨天，我更新了我的手机（Lumia 520）到一个更新的版本（8.0.10328.78），突然间固定的页脚部分超出了屏幕可视区域。

我尽可能地减少了代码，并应用了我能找到的设备宽度/设备高度修复的每个变体。

即使只有最基本的情况，在HTML5示例应用程序中也会出现同样的问题。

<div style="position: fixed; bottom:0; left:0; right:0; background-color: red; height:30px;">footer</div>

它被添加到其中。除非您向下滚动，否则只能看到前10个像素。此外，这并不像页脚没有固定，因为如果您创建了一个非常长的页面（多个屏幕长度），页脚将保持在同一位置（大约20个像素视线之外，直到您完全滚动到底部）。如果您完全向下滚动，则顶部20个像素的标题将被隐藏。

示例应用程序已经有了。

@-ms-viewport{ width: 320px; }

默认情况下就有。但实际上，我现在看到的问题与添加内容时解决的问题不同。（在旧情况下，您会看到页脚浮动大约20像素以上的底部，但即使删除ms-viewport部分，也不再发生这种情况。）

另外我进行了一些测量：

window.screen.height => 800
window.innerHeight => 512
window.outerHeight => 512
$(window).height() => 533

- Michielvv

Answer 1

虽然这是一个旧问题，但截至2015年1月，据我所知适用于Lumia 520+wp8.1的情况是：

<preference name="fullscreen" value="true"/>

在config.xml中可以解决这个问题，系统托盘会保持原样。您可以将其放置在特定的平台中。

<platform name="wp8">
    <preference name="fullscreen" value="true"/>
</platform>

- spanna

---

太棒了！你帮我省了很多麻烦。 - Tom Faltesek

这个解决方案在这里讨论过：http://www.intertech.com/Blog/windows-phone-ionic-cordova-viewport-issue/ 并且@spanna得到了归功！ - Tom Faltesek

但由于计算屏幕尺寸的错误，您的固定标题导航栏仍然出现在任务栏后面... - andreszs

Answer 2

我也在 Cordova/PhoneGap 应用程序中遇到了这个问题。即使在没有使用 PhoneGap 的 Windows Phone 8 HTML5 应用程序中，我也会看到这个问题（只需从“模板-> Visual C# -> Windows Phone HTML5 应用程序”中创建一个新项目即可）。如果您使用 IE 应用程序在 Windows Phone 8 上加载相同的 HTML5 代码，则不会出现此问题。

唯一发现的让视口正常工作的方法是隐藏系统托盘。

在 MainPage.xaml 中更改：

shell:SystemTray.IsVisible="True"

为了

shell:SystemTray.IsVisible="False"

这将隐藏系统托盘并使您的应用程序成为全屏应用程序。

由于某种原因，当应用程序全屏时，视口表现如预期。

- snctln

---

我可以确认它修复了这个问题。我已经怀疑它与那个栏有关，只是没有想到禁用它。抢夺用户的时钟和电池状态并不好，但这比完全没有固定定位要好。 （当然，现在我重新设计了应用程序，使其可以在没有固定页脚的情况下工作） - Michielvv