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

在 config.xml 中可以解决问题，将系统托盘留在他的位置。你可以把它放在平台细节中

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

Answer 2

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

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

在 MainPage.xaml 中更改

shell:SystemTray.IsVisible="True"

到

shell:SystemTray.IsVisible="False"

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

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