windows phone 8 HTML5 视口在更新到 8.0.10328.78 后高于屏幕 [英] windows phone 8 HTML5 viewport is higher than the screen after update to 8.0.10328.78

问题描述

我正在开发一个现有的 Cordova 应用程序，我想将它移植到 Windows Phone 8.在对渐变和视口问题应用一些修复之后，似乎一切正常.昨天我将我的手机 (Lumia 520) 更新到了新版本 (8.0.10328.78)，突然固定页脚部分超出了屏幕的可视区域.

I'm developing an existing Cordova app that I want to port to windows phone 8. After applying a few fixes for gradients and the viewport issue all seemed to work. Yesterday I've updated my phone (Lumia 520) to a newer version (8.0.10328.78) and suddenly the fixed footer is partly outside the viewable area of the screen.

我尽可能地减少了代码，并应用了我能找到的设备宽度/设备高度修复的所有变化.

I've reduced the code as much as I could and applied every variation of the device-width/device-height fixes I could find.

即使在 HTML5 示例应用程序中，最基本的情况也出现了

The most basic case appears even in the HTML5 sample app if only

<div style="position: fixed; bottom:0; left:0; right:0; background-color: red; height:30px;">footer</div>

被添加到其中.您只能看到前 10 个像素，除非您向下滚动.此外，它不像页脚不是固定的，因为如果您创建一个很长的页面(多个屏幕长度)，页脚将停留在同一个位置(大约 20 像素，直到您完全滚动到底部)如果您完全向下滚动，标题的前 20 个像素将被隐藏.

is added to it. You can only see the top 10 pixels, unless you scroll down. Furthermore it's not like the footer isn't fixed, because if you create a very long page (multiple screen lengths) the footer will stay in that same spot (about 20 pixels out of view, until you've scrolled to the bottom completely) If you do scroll down completely the top 20 pixels of the header will be hidden.

示例应用程序已经具有

@-ms-viewport{ width: 320px; }

默认在里面.但实际上，我现在看到的问题与通过添加该问题解决的问题不同.(在旧情况下，您会看到页脚浮动在底部上方约 20 像素处，但即使删除了 ms-viewport 部分，也不会再发生这种情况.)

in it by default. But actually the issue I'm seeing now it different than the one that was fixed by adding that. (in the old case, you would see the footer floating about 20pixels above the bottom, but even when the ms-viewport section is removed, that does not happen anymore.)

另外我做了一些测量:

window.screen.height => 800
window.innerHeight => 512
window.outerHeight => 512
$(window).height() => 533

推荐答案

我在 Cordova/PhoneGap 应用中也遇到过这个问题.当我不使用 PhoneGap 时，我什至在 Windows Phone 8 HTML5 应用程序中看到了这个问题(只需在 Visual Studio 2012 中从模板 -> Visual C# -> Windows Phone HTML5 应用程序"创建一个新项目).如果您使用 Windows Phone 8 上的 IE 应用程序从托管站点加载相同的 HTML5 代码，则不会出现此问题.

I have been having this issue in a Cordova/PhoneGap app as well. I even see the issue in Windows Phone 8 HTML5 apps when I am not using PhoneGap (just create a new project in Visual Studio 2012 from "Templates -> Visual C# -> Windows Phone HTML5 App"). This issue does not appear if you are loading the same HTML5 code from a hosted site using the IE app on Windows Phone 8.

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

The only thing that I have found to get the viewport to work correctly is to hide the system tray.

在 MainPage.xaml 中更改

In MainPage.xaml change

shell:SystemTray.IsVisible="True"

到

shell:SystemTray.IsVisible="False"

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

This hides the system tray and makes your app a fullscreen app.

出于某种原因，当应用全屏显示时，视口的行为符合预期.

For some reason when the app is full screen the viewport behaves as expected.

这篇关于windows phone 8 HTML5 视口在更新到 8.0.10328.78 后高于屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！