我正在开发一个现有的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视口部分,也不会发生.)
另外我做了几个测量：
window.screen.height => 800 window.innerHeight => 512 window.outerHeight => 512 $(window).height() => 533
解决方法
我也在Cordova / PhoneGap应用程序中遇到了这个问题.当我不使用PhoneGap(在Visual Studio 2012中从“模板 – > Visual C# – > Windows Phone HTML5 App”中创建一个新项目)时,我甚至在Windows Phone 8 HTML5应用中看到问题.如果您使用Windows Phone 8上的IE应用程序从托管站点加载相同的HTML5代码,则不会出现此问题.
找到使视口正常工作的唯一方法是隐藏系统托盘.
在MainPage.xaml更改
shell:SystemTray.IsVisible="True"
至
shell:SystemTray.IsVisible="False"
这将隐藏系统托盘,并使您的应用程序成为一个全屏应用程序.
由于某些原因,当应用程序是全屏幕时,视口的行为与预期的一样.
