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.)

此外，我做了一些测量：

In addition I did a few measurements:

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

推荐答案

PhoneGap应用程序。我甚至看不到在Windows Phone 8 HTML5应用程序的问题，当我不使用PhoneGap（只是在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屋！