JavaScript ou CSS peuvent-ils déterminer avec précision le DPI/PPI du système ?

Détermination du DPI/PPI du système à l'aide de JavaScript/CSS

Dans le monde du développement Web, créer des images qui s'adaptent parfaitement aux différentes résolutions d'affichage est crucial. Cependant, atteindre cette précision peut s’avérer difficile, en particulier lorsqu’il s’agit de divers appareils présentant des densités de pixels différentes. La question se pose : est-il possible de détecter automatiquement les valeurs DPI/PPI du système à l'aide de JavaScript ou de CSS ?

Tentatives et déceptions initiales

Les explorations initiales peuvent conduire à des suggestions telles que la création un élément d'une largeur de 1 pouce en CSS et en vérifiant son offsetWidth. Même si cette technique semble logique, elle a ses limites. Par exemple, les iPhones peuvent fournir des lectures inexactes en utilisant cette approche.

Solutions alternatives

Une approche alternative consiste à acquérir les dimensions de l'écran en pouces et à les diviser par la largeur des pixels. Cependant, cette méthode nécessite un moyen d'accéder aux dimensions physiques de l'écran, ce qui n'est pas simple.

Une solution basée sur JavaScript

Une solution JavaScript prometteuse exploite la propriété devicePixelRatio ainsi qu'un élément d'une hauteur et d'une largeur de 1 pouce dissimulé hors écran. Le code calcule les valeurs DPI en fonction des dimensions en pixels de cet élément, multipliées par le rapport de pixels de l'appareil, offrant ainsi un mécanisme de détection fiable.

const testDiv = document.getElementById('testdiv');
const devicePixelRatio = window.devicePixelRatio || 1;
const dpiX = testDiv.offsetWidth * devicePixelRatio;
const dpiY = testDiv.offsetHeight * devicePixelRatio;

console.log(dpiX, dpiY);

En mettant en œuvre cette approche, les développeurs peuvent déterminer avec précision le DPI/PPI. valeurs de l'appareil de l'utilisateur, permettant une génération d'images précises adaptées à des résolutions d'écran spécifiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!