Windows Phone Bildschirmhöhe in PhoneGap App nicht 100%

Question

Ich entwickle eine Windows Phone App mit PhoneGap/Cordova (obwohl ich glaube, das Problem, das ich habe, macht die Tatsache, dass es PhoneGap irrelevant ist). Egal, was ich zu tun scheint, füllt der Tag meiner HTML-Seiten den Bildschirm nicht vertikal. Es sieht gut aus, wenn die Seiten in Chrome oder sogar IE läuft Hier ist, wie es auf dem Emulator sieht, habe ich einen blauen Rand mit dem Tag in der CSS- zur Betonung dessen, was vor sich geht:

hier ist die CSS für den Körper:

body{ 
    border: 1px blue solid; 

} 

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

hier ist die CSS-Fußzeilen:

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; 
} 

ein d, so kann es wichtig sein, hier ist die XAML-Datei:

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

ein wichtiger Hinweis ist, dass es so funktioniert, ich will es in Chrome, IE, und wenn ich laufe es als Android App.

Die nächste Frage an meine, die ich finden konnte, war Phonegap Windows Phone gap space bottom aber die Antwort dort hilft mir nicht.

Ich habe kürzlich festgestellt, dass, wenn ich den gleichen Code von einem Web-Server ausführen und mit IE auf einem Windows-Handy zugreifen, sieht es gut aus. Ich habe jedoch feststellen, dass, wenn ein Alarm zeigt am Telefon war, die Adressleiste des IE geht weg und hinterlässt den exakt gleichen Spalt von der Unterseite der Web-Inhalte auf die Unterseite des Telefons als die native App immer angezeigt wird.

Also, das führt mich zu der Annahme, dass, obwohl es eine "App" ist, wenn es HTML und Javascript ausgeführt wird, das Telefon Platz für eine Adressleiste lässt, obwohl es nie verwendet wird.

Jede Hilfe oder Einsicht würde sehr geschätzt werden.

Answer 1

Ich versuchte geräte Höhe im Ansichtsfenster-Meta-Tag verwende, jedoch habe ich gelernt, dass der IE nicht den Tag nicht unterstützt. Dann nach meiner 100.000 Google Suche fand ich this page.

Nach Zugabe dieser meiner CSS:

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

und das Hinzufügen dieser in eine JavaScript-Datei, die alle meine Seiten hits:

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); 
} 

Dann begann meine 100% Körperhöhe die Art und Weise handeln, dass Ich würde es erwarten.

Answer 2

Der Überlauf ist eine seltsame IE10 WebBrowser Steuerelement Sache. Wenn Sie die Hintergrundfarbe des Körpers ändern, sehen Sie, dass über und unter Ihrem div die Hintergrundfarbe ist.

Hier ist eine einfache Abhilfe:

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

Answer 3

In Ihrer MainPage.xaml Datei ändern

shell:SystemTray.IsVisible="True" 

zu

shell:SystemTray.IsVisible="False" 

Answer 4

es scheint, dass die Schlüsselweite Eigenschaft in -ms-Ansichtsfenster ist, so dass eine einfachere Lösung wäre:

// 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>'); 
}