La propriétédevicePixelRatio, rattachée à l'interfaceWindow, renvoie le ratio de la résolution exprimée enpixels physiques par rapport à la résolution exprimée enpixels CSS pour l'appareil d'affichage courant.

Cette valeur peut également être interprétée comme le ratio des tailles de pixels : la taille d'unpixel CSS par rapport à la taille d'unpixel physique. Autrement dit, cela indique au navigateur le nombre de pixels réels qui sont utilisés pour dessiner un seul pixel CSS.

Cela s'avère utile lorsqu'il faut gérer les différences de rendu entre un affichage standard et un affichage HiDPI ou Retina, ces derniers utilisant plus de pixels à l'écran pour dessiner les mêmes objets afin d'avoir une image plus nette.

La méthodewindow.matchMedia() peut être utilisée pour vérifier si la valeur dedevicePixelRatio évolue (ce qui peut arriver si la personne déplace la fenêtre vers un affichage utilisant une densité de pixel différente). Voirl'exemple qui suit.

Valeur

Une valeur décimale à double précision qui indique le ratio de entre la résolution de l'affichage en pixels physiques et celle en pixels CSS. Lorsque cette propriété vaut 1, cela indique un affichage classique avec 96 DPI (ou 76 DPI sur certaines plateformes), et si elle vaut 2, on s'attend à ce que l'affichage soit HiDPI/Retina. D'autres valeurs pourront être renvoyées, notamment dans le cas d'une résolution d'affichage inhabituellement basse ou, plus fréquemment, lorsqu'un écran possède une profondeur de pixel plus élevée que le double de la résolution standard de 96 ou 76 DPI.

Exemples

Corriger la résolution dans un élément<canvas>

Un élément<canvas> pourra apparaître flou sur un écran Retina.window.devicePixelRatio pourra être utilisé afin de déterminer la densité de pixel supplémentaire qui peut être ajoutée pour obtenir une image plus nette.

HTML

<canvas></canvas>

JavaScript

const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");// On définit la taille d'affichage (en pixels CSS).const size = 200;canvas.style.width = `${size}px`;canvas.style.height = `${size}px`;// On définit la taille réelle en mémoire// mise à l'échelle pour tenir compte de la densité// de pixel supplémentaireconst scale = window.devicePixelRatio; // Passez cette valeur à 1 sur les écrans Retina pour voir un canevas flou.canvas.width = Math.floor(size * scale);canvas.height = Math.floor(size * scale);// On normalise le système de coordonnées pour// utiliser des pixels CSS.ctx.scale(scale, scale);ctx.fillStyle = "#bada55";ctx.fillRect(10, 10, 300, 300);ctx.fillStyle = "#ffffff";ctx.font = "18px Arial";ctx.textAlign = "center";ctx.textBaseline = "middle";const x = size / 2;const y = size / 2;const textString = "J'aime les licornes";ctx.fillText(textString, x, y);

Surveiller les changements de résolution ou de niveau de zoom

Dans cet exemple, nous allons utiliser une requête média pour observer lorsque la résolution de l'appareil change afin de vérifier la valeur dedevicePixelRatio et de gérer les éventuelles mises à jour nécessaires.

JavaScript

Le code JavaScript crée la requête média qui surveille la résolution de l'appareil et vérifie la valeur dedevicePixelRatio à chaque changement.

let remove = null;const updatePixelRatio = () => {  if (remove != null) {    remove();  }  let mqString = `(resolution: ${window.devicePixelRatio}dppx)`;  let media = matchMedia(mqString);  media.addEventListener("change", updatePixelRatio);  remove = function () {    media.removeEventListener("change", updatePixelRatio);  };  console.log("devicePixelRatio: " + window.devicePixelRatio);};updatePixelRatio();

La chaîne de caractèresmqString correspond à la requête média elle-même. La requête média commence avec(resolution: 1dppx) (pour les affichages standard) ou avec(resolution: 2dppx) (pour les affichages Retina/HiDPI) et est utilisée pour vérifier si la résolution actuelle de l'affichage correspond à un nombre donné de points par pixel.

La fonctionupdatePixelRatio() récupère la valeur courante dedevicePixelRatio, puis change le contenu de la propriétéinnerText de l'élémentpixelRatioBox en une chaîne de caractères décrivant le ratio comme un pourcentage et comme une valeur numérique brute avec deux chiffres décimaux.

Ensuite, la fonctionupdatePixelRatio() est appelée une fois pour afficher la valeur initiale. Après quoi, la requête média est créée à l'aide dematchMedia() etaddEventListener() est appelée afin de placerupdatePixelRatio() comme gestionnaire pour l'évènementchange.

HTML

Le HTML crée les boîtes contenant les instructions et la boîtepixel-ratio qui affichera les informations sur le ratio de pixel courant.

<div>  <div>    <p>      Cet exemple illustre les effets d'un zooom ou d'un dézoom de la page (mais      aussi du déplacement de la fenêtre vers un écran avec un autre facteur      d'échelle) sur la valeur de la propriété      <code>Window.devicePixelRatio</code>. Essayez de zoomer et voyez le      résultat !    </p>  </div>  <div></div></div>

CSS

body {  font:    22px arial,    sans-serif;}.container {  top: 2em;  width: 22em;  height: 14em;  border: 2px solid #22d;  margin: 0 auto;  padding: 0;  background-color: #a9f;}.inner-container {  padding: 1em 2em;  text-align: justify;  text-justify: auto;}.pixel-ratio {  position: relative;  margin: auto;  height: 1.2em;  text-align: right;  bottom: 0;  right: 1em;  font-weight: bold;}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les requêtes média
• Utiliser les requêtes média
• La caractéristique média CSSresolution
• La propriété CSSimage-resolution