12

我正在开发一个现有的 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
4

2 回答 2

8

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

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

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

<platform name="wp8">
    <preference name="fullscreen" value="true"/>
</platform>
于 2015-01-29T10:07:12.253 回答
5

我在 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"

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

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

于 2013-10-31T23:55:28.840 回答