Comment puis-je détecter avec précision le DPI/PPI d'un appareil à l'aide de JavaScript ?

Détection DPI/PPI de l'appareil en JS/CSS

La détermination de la résolution d'affichage d'un appareil est cruciale pour générer des images aux tailles appropriées. Cependant, détecter le DPI ou le PPI du système directement à partir de JavaScript ou de CSS pose des problèmes.

Une approche suggérée consiste à créer un élément avec sa largeur définie sur "1in" en CSS et à mesurer son offsetWidth. Cependant, cette méthode s'avère peu fiable sur des appareils comme les iPhones, qui signalent faussement un DPI de 96.

Une stratégie alternative consiste à obtenir les dimensions de l'écran en pouces et à les diviser par la largeur en pixels. La mise en œuvre de cette approche nécessite les étapes suivantes :

1. Créez un élément invisible avec des dimensions de 1x1 pouce.
2. Positionnez l'élément hors écran pour éviter toute interférence avec la mise en page.
3. Calculez le rapport de pixels de l'appareil (DPR) à l'aide de window.devicePixelRatio ou par défaut 1.
4. Multipliez offsetWidth et offsetHeight de l'élément par le DPR pour déterminer le DPI horizontal et vertical.

Vous trouverez ci-dessous un extrait de code JavaScript qui illustre cette approche :

<div>

Cette approche capture avec précision le DPI/PPI de l'appareil, permettant une génération précise de données spécifiques à l'appareil images.

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!