Windows Phone Phone 7的Windows Phone屏幕高度不能100％

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

这是身体的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"  
                   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
但是答案并没有帮助我.

我最近注意到,当我从网络服务器运行相同的代码并使用IE在Windows手机上访问它,它看起来不错.不过,我注意到,只要手机上显示警报信息,IE的地址栏就会消失,并从本地应用程序始终显示出来,从网页内容底部到手机底部的EXACT同样的差距.

所以,这导致我相信,即使它是一个“应用程序”,如果它运行html和javascript,手机留下空间的地址栏,即使它从来没有使用过.

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

我尝试在视口元标记中使用device-height,但是我了解到IE不支持该标记.然后经过我的10万google搜索,我发现了 this page.

添加到我的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％的身高开始采取我期望的方式.

原文链接：https://www.f2er.com/windows/363695.html

Windows Phone Phone 7的Windows Phone屏幕高度不能100％

猜你在找的Windows相关文章