Cette page a été traduite par l'API Cloud Translation.

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

Étant donné qu'Android est disponible sur des appareils avec des tailles d'écran et des densités de pixels variées, tenez compte de ces facteurs dans votre conception Web afin que vos pages soient correctement dimensionnées. WebView est compatible avec les fonctionnalités DOM, CSS et des balises Meta pour vous aider à afficher correctement votre contenu Web.

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

La fenêtre d'affichage: La fenêtre d'affichage est la zone rectangulaire qui fournit une zone drawable pour votre page Web. Vous pouvez spécifier plusieurs propriétés de la 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 du point de vue de la page Web, c'est-à-dire le nombre de pixels CSS disponibles.
Densité de l'écran: La classe WebView et la plupart des navigateurs Web sur Android convertissent vos valeurs de pixels CSS en valeurs de pixels indépendantes de la densité. Ainsi, votre page Web s'affiche à la même taille perceptible qu'un écran de densité moyenne, soit environ 160 PPP. Toutefois, si les graphiques sont un élément important de votre conception Web, faites attention à la mise à l'échelle qui se produit selon les densités. Par exemple, une image de 300 pixels de large sur un écran de 320 ppp est agrandie. Elle utilise plus de pixels physiques par pixel CSS. Cela peut produire des artefacts comme un flou et une pixellisation. Pour plus de simplicité, Android réduit la plupart des petites densités d'écran en quelques catégories générales: petite, moyenne et grande. Pour en savoir plus sur la densité de l'écran, consultez 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 correspond à la zone dans laquelle votre page Web est dessinée. Bien que la surface totale visible de la fenêtre d'affichage corresponde à la taille de l'écran lorsque l'utilisateur fait un zoom arrière, cette dernière possède ses propres dimensions en pixels, qu'elle met à la disposition d'une page Web. Par exemple, bien qu'un écran d'appareil puisse avoir une largeur physique de 480 pixels, la fenêtre d'affichage peut avoir une largeur de 800 pixels. Ainsi, une page Web conçue avec une largeur de 800 pixels est entièrement visible à l'écran lorsque l'échelle de la fenêtre d'affichage est de 1,0.

La plupart des navigateurs Web sur Android, y compris Chrome, définissent par défaut une grande taille de fenêtre d'affichage. Ce _mode de fenêtre d'affichage large_ mesure environ 980 pixels de large. Par défaut, de nombreux navigateurs font également un zoom arrière aussi loin que possible pour afficher toute la largeur de la fenêtre d'affichage. C'est ce que l'on appelle le "mode présentation".

Remarque:Lorsque votre page s'affiche dans une WebView, le mode de fenêtre d'affichage large n'est pas utilisé par défaut. Vous pouvez activer le mode de fenêtre d'affichage large avec setUseWideViewPort().

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

La syntaxe suivante montre toutes les propriétés de fenêtre d'affichage compatibles et les types de valeurs acceptés par chacune:

<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 à celle 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" afin que la taille s'adapte exactement à tous les appareils, puis vous utilisez des requêtes média CSS pour adapter de manière flexible les mises en page à différentes tailles d'écran.

Densité d'appareils cible avec CSS

WebView est compatible avec -webkit-device-pixel-ratio, une fonctionnalité multimédia CSS qui vous permet de créer des styles pour des densités d'écran spécifiques. La valeur que vous appliquez à cette fonctionnalité doit être de 0,75, 1 ou 1,5, pour indiquer que les styles sont destinés aux appareils avec une densité d'écran faible, moyenne ou élevée.

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 seule 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 des images, consultez la section Images haute résolution pour des densités de pixels variables.

Densité d'appareils cible avec JavaScript

WebView est compatible avec window.devicePixelRatio, qui est une propriété DOM qui vous permet d'interroger la densité de l'appareil actuel. La valeur de cette propriété spécifie le facteur de scaling utilisé pour l'appareil actuel. Si la valeur de window.devicePixelRatio est 1.0, l'appareil est considéré comme un appareil de densité moyenne et aucune mise à l'échelle n'est appliquée par défaut. Si la valeur est de 1,5, l'appareil est considéré comme un appareil haute densité, et la page est mise à l'échelle 1,5 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,75 par défaut.

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

Par exemple, pour interroger la densité de l'appareil avec 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");
}