Chiều cao màn hình của Windows Phone trong ứng dụng PhoneGap không phải 100%

Question

Tôi đang phát triển ứng dụng Windows Phone bằng PhoneGap/Cordova (mặc dù, tôi tin rằng sự cố tôi gặp phải khiến PhoneGap không liên quan). Không có vấn đề gì tôi dường như làm, thẻ của các trang html của tôi không điền vào màn hình theo chiều dọc. Có vẻ tốt khi chạy các trang web trong Chrome hoặc thậm chí IE Đây là những gì nó trông giống như trên Emulator, tôi đã thêm một đường viền màu xanh để thẻ trong .css để nhấn mạnh về những gì đang xảy ra:

đây là css cho cơ thể:

body{ 
    border: 1px blue solid; 

} 

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

đây là footers 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; 
} 

một d, vì nó có thể quan trọng, đây là tập tin 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> 

một lưu ý quan trọng là nó hoạt động theo cách tôi muốn nó trong Chrome, IE, và khi tôi chạy nó như một ứng dụng Android.

Câu hỏi gần tôi nhất mà tôi có thể tìm thấy là Phonegap Windows Phone gap space bottom nhưng câu trả lời không giúp tôi.

Tôi đã nhận thấy gần đây rằng khi tôi chạy cùng một mã tắt của một máy chủ web và truy cập nó bằng cách sử dụng IE trên một cửa sổ điện thoại, có vẻ tốt. Tuy nhiên, tôi đã nhận thấy rằng bất cứ khi nào một cảnh báo được hiển thị trên điện thoại, thanh địa chỉ của IE biến mất và để lại khoảng cách tương tự EXACT từ dưới cùng của nội dung web đến cuối điện thoại vì ứng dụng gốc luôn hiển thị.

Vì vậy, điều đó khiến tôi tin rằng, mặc dù đó là một "ứng dụng", nếu nó chạy html và javascript, điện thoại sẽ để lại không gian cho thanh địa chỉ, mặc dù nó không bao giờ được sử dụng.

Bất kỳ trợ giúp hoặc thông tin chi tiết nào sẽ được đánh giá cao.

Answer 1

tôi đã cố gắng sử dụng thiết bị-height trong thẻ meta viewport, tuy nhiên tôi biết rằng IE không hỗ trợ thẻ đó. Sau đó, sau khi tìm kiếm 100.000 google của tôi, tôi tìm thấy this page.

Sau này thêm vào CSS của tôi:

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

và thêm này vào một tập tin JavaScript mà lượt truy cập tất cả các trang của tôi:

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

Sau đó, 100% chiều cao cơ thể của tôi bắt đầu hoạt động cách mà Tôi mong chờ nó.

Answer 2

Lỗi tràn là điều khiển trình duyệt IE10 WebBirder kỳ lạ. Nếu bạn thay đổi màu nền của phần thân, bạn sẽ thấy rằng cả hai bên trên và bên dưới div của bạn là màu nền.

Dưới đây là một cách giải quyết đơn giản:

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

Answer 3

Trong file MainPage.xaml của bạn, thay đổi

shell:SystemTray.IsVisible="True" 

để

shell:SystemTray.IsVisible="False" 

Answer 4

có vẻ như chính là bất động sản rộng trong -ms-viewport, do đó, một giải pháp đơn giản sẽ là:

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