Windows Phone 8 HTML5 视区在更新到 8.0.10328.78 后高于屏幕

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

Answer 1

老问题，但截至 2015 年 1 月，据我所知，对于 Lumia 520+wp8.1，

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

在配置中.xml可以解决问题，将系统托盘留在他的位置。您可以将其放在平台细节中

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

Answer 2

我在Cordova/PhoneGap应用程序中也遇到了这个问题。 当我不使用PhoneGap时，我什至在Windows Phone 8 HTML5应用程序中看到了这个问题（只需从"模板->Visual C#->Windows Phone HTML5应用程序"在Visual Studio 2012中创建一个新项目）。 如果您在 Windows Phone 8 上使用 IE 应用程序从托管网站加载相同的 HTML5 代码，则不会出现此问题。

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

在主页.xaml 更改中

shell:SystemTray.IsVisible="True"

自

shell:SystemTray.IsVisible="False"

这会隐藏系统托盘，并使应用成为全屏应用。

由于某种原因，当应用全屏时，视口的行为符合预期。