9

我正在使用 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,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 间隙空间底部 ，但那里的答案对我没有帮助。

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

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

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

4

4 回答 4

12

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

将此添加到我的 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% 的身高开始按照我的预期行事。

于 2013-06-12T17:26:23.160 回答
3

在您的MainPage.xaml文件中，更改 

shell:SystemTray.IsVisible="True"

至

shell:SystemTray.IsVisible="False"
于 2014-05-09T02:32:11.683 回答
1

似乎关键是-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>');
}
于 2014-07-04T07:32:11.827 回答
0

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

这是一个简单的解决方法：

document.addEventListener("DOMContentLoaded", function () {
    var div = document.querySelector(".navbar_table_container");
    div.style.top = (div.offsetTop + div.offsetHeight + 4) + "px";
});
于 2013-06-11T23:55:31.867 回答