css – windows phone 8 HTML5 viewport比更新到8.0.10328.78之后的屏幕高

前端之家收集整理的这篇文章主要介绍了css – windows phone 8 HTML5 viewport比更新到8.0.10328.78之后的屏幕高前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在开发一个现有的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"

这将隐藏系统托盘,并使您的应用程序成为一个全屏应用程序.

由于某些原因,当应用程序是全屏幕时,视口的行为与预期的一样.

原文链接:https://www.f2er.com/css/216366.html

猜你在找的CSS相关文章