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 gap space bottom でしたが、そこの答えは役に立ちません。

最近、Web サーバーから同じコードを実行し、Windows Phone で IE を使用してアクセスすると、問題なく表示されることに気付きました。ただし、アラートが電話に表示されるたびに、IE のアドレス バーが消え、ネイティブ アプリが常に表示されているため、Web コンテンツの下部から電話の下部までの正確なギャップが残ることに気付きました。

つまり、それが「アプリ」であっても、html と javascript を実行している場合、電話は使用されていなくてもアドレスバー用のスペースを残していると私は信じています。

どんな助けや洞察も大歓迎です。

4

4 に答える 4

12

ビューポート メタ タグで device-height を使用してみましたが、IE がそのタグをサポートしていないことがわかりました。その後、100,000 回の Google 検索を行った後、このページを見つけました。

これを私の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 に答える