Windows Phone在PhoneGap应用中的屏幕高度不是100%

Question

我正在使用PhoneGap/Cordova开发一个Windows Phone应用程序（虽然我认为我遇到的问题与它是PhoneGap无关）。 无论我做什么，我的html页面的标签都无法垂直填充屏幕。 在Chrome甚至IE中运行页面时看起来很好。 这是在模拟器上的样子，在.css中添加了一个蓝色边框以强调发生了什么：

下面是body的css：

  body{
    border: 1px blue solid;

}

html, body{
    height:100%;
    min-height:100%
}

这是页面底部的CSS样式表：

div.navbar_table_container {
    width: 100%;
    height: auto;   
    position: absolute;
    bottom: 0;
    background-image:url(images/bottom-nav.png);
    background-size:100% 100%;
    background-repeat:no-repeat;
    text-align: center;
}

同时，这里提供XAML文件，可能很重要：

<phone:PhoneApplicationPage 
    x:Class="CordovaWP8_2_7_01.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    Background="White"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True" d:DesignHeight="820" d:DesignWidth="480" 
    xmlns:my="clr-namespace:WPCordovaClassLib">
    <Grid x:Name="LayoutRoot" Background="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <my:CordovaView HorizontalAlignment="Stretch" 
                   Margin="0,0,0,0"  
                   x:Name="CordovaView" 
                   VerticalAlignment="Stretch" />
        <Image Source="SplashScreenImage.jpg"
          x:Name="SplashImage"
          VerticalAlignment="Stretch"
          HorizontalAlignment="Stretch">
            <Image.Projection>
                <PlaneProjection x:Name="SplashProjector"  CenterOfRotationX="0"/>
            </Image.Projection>
        </Image>
    </Grid>

</phone:PhoneApplicationPage>

一个重要的注意点是，它在Chrome、IE以及作为Android应用程序运行时都按照我想要的方式工作。

与我的问题最接近的问题是 Phonegap Windows Phone gap space bottom，但那里的答案对我没有帮助。

我最近注意到，当我从Web服务器上运行相同的代码并在Windows手机上使用IE访问时，它看起来很好。然而，我确实注意到每当Alert在手机上显示时，IE的地址栏就会消失，并留下与本机应用程序始终显示的底部网页内容到手机底部的完全相同的间隙。

因此，这让我相信，即使它是一个“应用程序”，如果它运行HTML和JavaScript，手机也会留出地址栏的空间，即使它从未被使用。

任何帮助或见解将不胜感激。

- Sharpleaf

---

我已经将此项目的www文件夹放置在Eclipse Android PhoneGap项目中，并在Android模拟器上运行它。在那里看起来很好。所以我仍然不确定为什么在Windows手机上不正确。 - Sharpleaf

我已经将www文件夹上传到我的Web服务器，并尝试在Windows手机上使用IE进行导航。这样做，它的格式正确。所以我猜这确实与Windows手机处理HTML应用程序的方式有关。作为“真正的网页”，它看起来很好，但当编译为应用程序时，它会出现底部间隙问题。 - Sharpleaf

Answer 1

我尝试在 viewport meta 标签中使用 device-height，但是我了解到 IE 不支持该标签。 在经过了 10 万次谷歌搜索之后，我找到了 这个页面。

在我的 CSS 中添加以下内容后：

@viewport{height:device-height}
@viewport{width:device-width}
@-ms-viewport{height:device-height}
@-ms-viewport{width:device-width}

然后将这段代码添加到一个 JavaScript 文件中，使其影响到我所有的页面：

if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
    var msViewportStyle = document.createElement("style");

    msViewportStyle.appendChild(
        document.createTextNode(
            "@-ms-viewport{width:auto!important}"
        )
    );

    msViewportStyle.appendChild(
        document.createTextNode(
            "@-ms-viewport{height:device-height!important}"
        )
    );

    document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}

然后我的身高100%开始表现出我所期望的方式。

- Sharpleaf

---

嗨，Sharpleaf，在CSS中，ms视口宽度设置为设备宽度，那么为什么我们需要再用不同的值（auto？）在js代码中重新设置它？这让我感到困惑。 - Franva

注意，如果您放置CSS注释，则会丢失CSS密度声明（您的设备将声明屏幕像素/ CSS像素比为1，而不是高密度屏幕上的2或3，这可能导致非常小的布局）。我认为使用device-width CSS，然后使用auto进行JS修复可能是解决IEmobile检测到的屏幕大小的一种小“hack”。但是Sharpleaf肯定可以为我们提供更多见解。 - Rayjax

Answer 2

在你的MainPage.xaml文件中，更改：

shell:SystemTray.IsVisible="True"

to

shell:SystemTray.IsVisible="False"

- Sunson

---

在我添加了另一个答案之后，这对我有用。 - Mene

Answer 3

看起来关键是-ms-viewport中的宽度属性，因此一个更简单的解决方案是:

// put this in body or after body as it uses document.body.offsetWidth.
if (/IEMobile\/10\.0/.test(navigator.userAgent)) {
    document.write('<style>@-ms-viewport { width: ' + document.body.offsetWidth + 'px; }</style>');
}

- vilicvane

Answer 4

溢出是一种奇怪的IE10 WebBrowser控件问题。如果您更改body的背景颜色，您将看到您的div上方和下方都是背景颜色。

这里有一个简单的解决方法：

document.addEventListener("DOMContentLoaded", function () {
    var div = document.querySelector(".navbar_table_container");
    div.style.top = (div.offsetTop + div.offsetHeight + 4) + "px";
});

- purplecabbage