Je développe une application Windows Phone à l'aide de PhoneGap / Cordoue (cependant, je crois que le problème que je vais faire le fait que sa téléphonie n'est pas permanente). Peu importe ce que je semble faire, la balise de mes pages HTML ne remplit pas l'écran verticalement. Il a l'air bien lorsque vous exécutez les pages en chrome ou même à savoir Voici à quoi il ressemble à l'émulateur, j'ai ajouté une bordure bleue à la balise dans les .CSS pour mettre l'accent sur ce qui se passe:
p>
Voici le CSS pour le corps: P>
<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>
4 Réponses :
Le débordement est une chose bizarre IE10 WebBrowser Control. Si vous changez la couleur d'arrière-plan du corps, vous verrez que les deux ci-dessus et au-dessous de votre div sont la couleur de fond.
Voici une solution de contournement simple: p>
document.addEventListener("DOMContentLoaded", function () {
var div = document.querySelector(".navbar_table_container");
div.style.top = (div.offsetTop + div.offsetHeight + 4) + "px";
});
J'ai essayé d'utiliser la hauteur du périphérique dans la balise Méta ci--planie, mais j'ai appris que c'est-à-dire que c'est pas en charge cette étiquette. Ensuite, après ma recherche Google 100 000, j'ai trouvé Cette page .
Après avoir ajouté ceci à mon CSS: et en ajoutant ceci à un fichier JavaScript qui frappe toutes mes pages: Ensuite, ma hauteur de 100% du corps a commencé à agir la manière dont je m'attendrais à.
HI Sharpleaf, en CSS, la largeur de la vue MS est définie sur la largeur de l'appareil, puis pourquoi devons-nous la définir à nouveau avec une valeur différente (auto ??) dans le code JS ???? Ça me rend confus .....
Soyez prudent, si vous mettez les notations CSS, vous perférez des déclarations de densité CSS (votre appareil déclare un rapport pixel à écran / CSS de 1, au lieu de 2 ou 3 sur des écrans à haute densité, ce qui peut entraîner de très petites aménagements). Je crois que la largeur de périphérique CSS, puis le correctif JS avec automatique pourrait être un peu "hack" pour fixer la taille de l'écran détectée par Iemobile. Mais Sharpleaf peut certainement nous donner plus de perspicacité sur ce JS
dans votre MAINPAGE.XAML CODE> Fichier, modifiez shell:SystemTray.IsVisible="False"
Cela m'a fait pour moi après avoir ajouté l'autre réponse.
Il semble que la clé est la largeur de la largeur de -Ms-Viewport, une solution plus simple serait la suivante:
// 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>');
}
J'ai pris le dossier www de ce projet et l'ai placé dans un projet Eclipse Android PhoneGap et le faisait sur les émulateurs Android. Ça a l'air bien là-bas. Donc, je ne suis toujours pas sûr de savoir pourquoi ce n'est pas correct sur le téléphone Widows.
J'ai pris le dossier www et téléchargé sur mon serveur Web et j'ai essayé de la naviguer à l'aide d'IE sur un téléphone Windows. Faire cela, cela formate correctement. Donc, cela a vraiment quelque chose à voir avec la façon dont Windows Phone gère les applications HTML que je devine. En tant que "vraie page Web", il a l'air bien, mais lorsqu'il est compilé comme une application, il a le problème de l'écart inférieur.