PhoneGap 应用程序中的 Windows Phone 屏幕高度不是 100% [英] Windows Phone screen height in PhoneGap app not 100%

问题描述

我正在使用 PhoneGap/Cordova 开发 Windows Phone 应用程序(不过，我相信我遇到的问题使得它与 PhoneGap 无关).无论我做什么，我的 html 页面的标签都不会垂直填满屏幕.在 Chrome 甚至 IE 中运行页面时看起来不错这是模拟器上的样子，我在 .css 中的标签中添加了一个蓝色边框，以强调正在发生的事情:

I'm developing a Windows Phone app using PhoneGap/Cordova (though, I believe the problem I'm having makes the fact that it's PhoneGap irrelevant). No matter what I seem to do, the tag of my html pages doesn't fill the screen vertically. It looks fine when running the pages in Chrome or even IE Here is what it looks like on the Emulator, I added a blue border to the tag in the .css for emphasis of what's going on:

这是身体的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 文件:

and, as it may be important, here's the xaml file:

<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 应用程序运行时都按照我希望的方式工作.

an important note is that it works the way I want it to in Chrome, IE, and when I run it as an android app.

我能找到的最接近我的问题是Phonegap Windows Phone 间隙空间底部但那里的答案对我没有帮助.

The closest question to mine that I could find was Phonegap Windows Phone gap space bottom but the answer there doesn't help me.

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

I've noticed recently that when I run the same code off of a web server and access it using IE on a windows phone, it looks fine. However, I did notice that whenever an Alert was shows on the phone, the address bar of IE goes away and leaves behind the EXACT same gap from the bottom of the web content to the bottom of the phone as the native app is always showing.

所以，这让我相信，即使它是一个应用程序"，如果它运行 html 和 javascript，即使从未使用过，手机也会为地址栏留出空间.

So, that leads me to believe that, even though it's an "app", if it's running html and javascript, the phone leaves space for an address bar, even though it's never used.

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

Any help or insight would be greatly appreciated.

推荐答案

我尝试在视口元标记中使用设备高度，但是我了解到 IE 不支持该标记.然后在我 100,000 次谷歌搜索后，我找到了这个页面.

I tried using device-height in the viewport meta tag, however I learned that IE doesn't support that tag. Then after my 100,000 google search, I found this page.

将其添加到我的 CSS 后:

After adding this to my CSS:

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

并将其添加到访问我所有页面的 JavaScript 文件中:

and adding this to a JavaScript file that hits all of my pages:

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% 的身高开始按照我的预期行事.

Then my 100% body height started acting the way that I would expect it to.

这篇关于PhoneGap 应用程序中的 Windows Phone 屏幕高度不是 100%的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！