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 C# - > Windows Phone HTML5应用程序"中创建Visual Studio 2012中的新项目).如果您使用Windows Phone 8上的IE应用程序从托管站点加载相同的HTML5代码,则不会出现此问题.

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

在MainPage.xaml中更改

shell:SystemTray.IsVisible="True"

至

shell:SystemTray.IsVisible="False"

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

出于某种原因,当应用程序全屏时,视口的行为符合预期.