Assurer la compatibilité avec différents écrans dans les applications Web

Android est disponible sur les appareils avec différentes tailles d'écran et densités de pixels. tenir compte de ces facteurs dans votre conception Web afin que vos pages aient une taille appropriée. WebView accepte les balises DOM, CSS et Meta. pour vous aider à afficher votre contenu Web de manière appropriée.

Lorsque vous ciblez vos pages Web sur les appareils Android, vous devez tenir compte de deux facteurs majeurs. pour:

La fenêtre d'affichage
La fenêtre d'affichage est une zone rectangulaire qui fournit une zone drawable pour votre page Web. Toi peut spécifier plusieurs propriétés de fenêtre d'affichage, telles que sa taille et son échelle initiale. Le plus important est La largeur de la fenêtre d'affichage, qui définit le nombre total de pixels horizontaux disponibles depuis l'écran du point de vue : il s'agit du nombre de pixels CSS disponibles.
Densité d'écran
La classe WebView et la plupart des navigateurs Web sur Android convertissent vos valeurs en pixels CSS aux valeurs de pixels indépendantes de la densité, de sorte que la taille de votre page Web s'affiche de la même manière qu'un écran de densité moyenne, d'environ 160 ppp. Cependant, si les graphiques sont un élément important de votre conception Web, faites attention à la mise à l'échelle qui intervient en fonction de la densité. Par exemple, une image de 300 pixels de large sur un écran de 320 ppp est ajustée (elle utilise plus de pixels physiques par CSS). Pixel. Cela peut entraîner un floutage et une pixellisation, par exemple. Pour plus de simplicité, Android se réduit la plupart des petites densités d'écran en quelques catégories générales: petite, moyenne et grande. Pour apprendre en savoir plus sur la densité de l'écran, lire Assurer la compatibilité avec différentes densités de pixels.

Consultez les ressources associées suivantes :

Spécifier les propriétés de la fenêtre d'affichage

La fenêtre d'affichage est la zone dans laquelle votre page Web est dessinée. Bien que le total visible dans la fenêtre d'affichage correspond à la taille de l'écran en cas de zoom arrière complet, la fenêtre d'affichage possède son propre pixel des dimensions qu'il met à la disposition d'une page Web. Par exemple, même si l'écran d'un appareil peut avoir une largeur physique de 480 pixels, la largeur de la fenêtre d'affichage peut être de 800 pixels. Cela permet à une page Web conçue sur 800 pixels de largeur doit être entièrement visible à l'écran lorsque l'échelle de la fenêtre d'affichage est de 1,0.

La plupart les navigateurs Web sur Android, y compris Chrome, définissent par défaut une grande taille de la fenêtre d'affichage. La largeur de cette _fenêtre d'affichage large_ est d'environ 980 pixels. De nombreux navigateurs font également un zoom arrière possible par défaut d'afficher toute la largeur de la fenêtre d'affichage, appelée _overview mode_.

<ph type="x-smartling-placeholder">

Vous pouvez définir les propriétés de la fenêtre d'affichage de votre page Web, telles que la largeur et le zoom initial. à l'aide de la balise <meta name="viewport" ...> dans votre document <head>

La syntaxe suivante affiche toutes les propriétés de fenêtre d'affichage acceptées et les types de valeurs acceptés par chacun:

<meta name="viewport"
      content="
          height = [pixel_value | "device-height"] ,
          width = [pixel_value | "device-width"] ,
          initial-scale = float_value ,
          minimum-scale = float_value ,
          maximum-scale = float_value ,
          user-scalable = ["yes" | "no"]
          " />

Par exemple, la balise <meta> suivante spécifie que la largeur de la fenêtre d'affichage correspond la largeur de l'écran de l'appareil et que la possibilité de zoomer est désactivée:

<head>
    <title>Example</title>
    <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

Lorsque vous optimisez votre site pour les appareils mobiles, vous définissez généralement la largeur sur "device-width" pour que la taille s'adapte parfaitement à tous les appareils, puis utilisez des requêtes média CSS pour adapter les mises en page de manière flexible à différentes tailles d'écran.

<ph type="x-smartling-placeholder">

Densité d'appareil cible avec CSS

WebView est compatible avec -webkit-device-pixel-ratio, qui est un média CSS qui vous permet de créer des styles pour des densités d'écran spécifiques. La valeur que vous appliquez doit être de 0,75, 1 ou 1,5, pour indiquer que les styles sont destinés aux appareils dont la les écrans haute densité, respectivement.

Vous pouvez créer des feuilles de style distinctes pour chaque densité:

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />

Vous pouvez également spécifier les différents styles dans une feuille de style:

#header {
    background:url(medium-density-image.png);
}

@media screen and (-webkit-device-pixel-ratio: 1.5) {
    /* CSS for high-density screens */
    #header {
        background:url(high-density-image.png);
    }
}

@media screen and (-webkit-device-pixel-ratio: 0.75) {
    /* CSS for low-density screens */
    #header {
        background:url(low-density-image.png);
    }
}

Pour en savoir plus sur la gestion des différentes densités d'écran, en particulier les images, consultez Images haute résolution pour des densités de pixels variables.

Densité d'appareil cible avec JavaScript

WebView est compatible avec window.devicePixelRatio, qui est une propriété DOM vous permet d'interroger la densité de l'appareil actuel. La valeur de cette propriété spécifie le scaling pour l'appareil actuel. Si la valeur de window.devicePixelRatio est 1,0, l'appareil est alors considéré comme de densité moyenne, et aucune mise à l'échelle n'est appliquée par défaut. Si le est de 1,5, l'appareil est considéré comme un appareil haute densité et la page est mise à l'échelle 1,5 x par défaut. Si la valeur est de 0,75, l'appareil est considéré comme un appareil à faible densité, et la page est mise à l'échelle 0,75x par défaut.

Le scaling appliqué par le navigateur Android et WebView est basé sur l'état de la page Web la densité cible. Comme décrit dans la section Définir la fenêtre d'affichage cible, la densité cible par défaut est "Densité moyenne", mais vous pouvez modifier la cible l'échelle de votre page Web pour différentes densités d'écran.

Par exemple, voici comment vous pouvez interroger la densité d'appareils à l'aide de JavaScript:

if (window.devicePixelRatio == 1.5) {
  alert("This is a high-density screen");
} else if (window.devicePixelRatio == 0.75) {
  alert("This is a low-density screen");
}