Comment détecter avec précision les DPI/PPI de JS/CSS face à la tromperie des appareils ?

Détection du DPI/PPI du système à partir de JS/CSS

Arrière-plan

Maintenir une expérience utilisateur cohérente sur tous les appareils avec différents paramètres DPI/PPI est crucial pour les applications modernes qui génèrent des images haute résolution. Cependant, la détection précise du DPI/PPI de l'appareil présente des défis, car les méthodes traditionnelles peuvent ne pas fournir de résultats fiables.

Appareil couché : une fausse lecture de 96 ppi

Votre approche initiale utilisant un élément avec un "fixe" 1in" de largeur en CSS et vérifier son offsetWidth semble raisonnable. Cependant, il est connu que l'iPhone déclare erronément son PPI, donnant une fausse valeur de 96ppi. Cette fausse lecture rend cette méthode peu fiable.

Approche alternative : dimensions d'affichage de l'appareil

Une autre solution potentielle consiste à récupérer les dimensions d'affichage de l'appareil en pouces et à les diviser par la largeur en pixels. Cependant, accéder à ces dimensions n'est pas simple en JS/CSS.

Solution : DevicePixelRatio

Heureusement, il existe une méthode fiable pour obtenir le DPI/PPI de l'appareil :

1. Utilisez window.devicePixelRatio : Cette propriété fournit le rapport entre les pixels de l'écran de l'appareil et les pixels CSS.
2. Créer un élément de test : Créez un élément invisible avec une hauteur et une largeur de 1 pouce en CSS.
3. Récupérer la résolution d'affichage : Calculez le DPI/PPI en multipliant la largeur et la hauteur du décalage de l'élément par le devicePixelRatio.

<code class="javascript">const testDiv = document.createElement('div');
testDiv.style.height = '1in';
testDiv.style.left = '-100%';
testDiv.style.position = 'absolute';
testDiv.style.top = '-100%';
testDiv.style.width = '1in';
document.body.appendChild(testDiv);

const DPI_X = testDiv.offsetWidth * window.devicePixelRatio;
const DPI_Y = testDiv.offsetHeight * window.devicePixelRatio;

console.log(DPI_X, DPI_Y);</code>

Cette méthode fournit des lectures DPI/PPI précises sur divers appareils, y compris ceux qui peuvent déclarer de manière erronée leur PPI en utilisant les méthodes traditionnelles.

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!