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应用程序中看到了这个问题（只需在“模板 - ＆gt; Visual C＃ - ＆gt; Windows Phone HTML5应用程序”中创建Visual Studio 2012中的新项目）。如果您使用Windows Phone 8上的IE应用程序从托管站点加载相同的HTML5代码，则不会出现此问题。

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

在MainPage.xaml中更改

shell:SystemTray.IsVisible="True"

到

shell:SystemTray.IsVisible="False"

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

出于某种原因，当应用程序全屏时，视口的行为与预期一致。

Windows Phone 8 HTML5视口高于更新后的屏幕8.0.10328.78

2 个答案: