web-dev-qa-db-fra.com

Comment accéder aux paramètres DPI de l'affichage à l'écran via javascript?

Existe-t-il un moyen d'accéder aux paramètres DPI de l'écran à l'aide d'une fonction Javascript?

J'essaie de positionner un panneau HTML sur la page et lorsque le DPI de l'utilisateur est défini sur grand (120), il désactive la position. J'ai besoin de savoir ce qu'est le DPI pour pouvoir ajuster la position en conséquence.

javascriptdpidisplay-dpi
48
Yttrium

Premièrement, pour aider à la confusion possible (et très courante) avec le terme DPI (points par pouce):

DPI ne fait pas exactement partie des "paramètres d'affichage". Il est (mal) utilisé dans deux contextes différents:

  1. Les pixels natifs par pouce d'un écran (ou vidéo). Il détermine la taille des pixels. Vous pouvez avoir la même résolution 1024x768 sur un écran d'ordinateur portable 14 "et un écran 17" LCD moniteur. Le premier serait à peu près 1280/14 = 91 DPI et le dernier serait à peu près 1280/17 = 75 DPI. Le DPI d'un écran est immuable; il ne peut pas être modifié avec les paramètres d'affichage. Plus ...
  2. Les points par pouce peints sur papier lors de l'impression. Il s'agit du nombre de points côte à côte qu'une imprimante/photocopieuse/télécopieur peut imprimer dans un pouce de papier. La plupart des imprimantes peuvent être configurées pour imprimer à un DPI inférieur, en imprimant simplement chaque point sous la forme de deux, quatre, etc. points. Plus ...

Lors de l'impression d'une image, de nombreux facteurs affectent les dimensions finales de l'image sur papier:

  • Les dimensions de l'image source - c'est la quantité de pixels ou de données qu'il y a.
  • Le DPI de l'image source. Cette valeur détermine la façon dont les dimensions doivent être interprétées lors de l'impression de l'image.
  • Si l'image source n'a pas d'informations DPI intégrées (un JPEG peut en avoir un, un GIF n'en a jamais), le programme utilisé peut avoir des paramètres pour spécifier un DPI. Cela peut être une visionneuse/éditeur d'images ou même un navigateur Web.
  • Facteur de zoom généralement spécifié dans une boîte de dialogue d'impression.
  • Le paramètre DPI actuel de l'imprimante.
  • Le DPI physique (max) de l'imprimante.

En fin de compte, l'image que vous imprimez sera effectivement rééchantillonnée (réduite ou agrandie) pour correspondre au DPI final utilisé dans le processus d'impression. L'une des parties impliquées peut en être la cause (le programme, le pilote d'impression, l'imprimante).

Maintenant, revenons à votre question. Non, vous ne pouvez pas déterminer le DPI de l'écran, car il ne fait pas partie du domaine logiciel. Il s'agit d'un terme de domaine matériel décrivant la taille d'un moniteur qu'un utilisateur peut se permettre d'acheter.  Mise à jour: J'ai initialement écrit cette réponse en 2009, avec ma compréhension des technologies actuelles. Comme l'a souligné @thure, vous pouvez désormais (depuis 2012?) Utiliser la fonction window.matchMedia pour déterminer le DPI de l'écran.

Si vous essayez d'obtenir une précision dans l'impression d'une mise en page HTML, comme d'autres l'ont suggéré, votre CSS devrait utiliser des dimensions d'impression comme em, pt ou pc au lieu de px. Cependant, le résultat final peut toujours dépendre du navigateur utilisant. Si la conversion de votre code HTML en PDF (ou en générant PDF à partir de zéro) est une option pour vous, l'impression d'un PDF vous donner le WYSIWYG le plus vrai à l'écran et sur papier.

36
Ates Goral

On dirait que vous pouvez utiliser l'objet DOM "écran" dans IE, ses propriétés pour deviceXDPI, deviceYDPI, logicXDPI, logicYDPI.

https://www.w3schools.com/jsref/obj_screen.asp

Voici une solution de http://www.webdeveloper.com/forum/showthread.php?t=175278 (je ne l'ai pas essayé, cela ressemble à un hack total :) Créez simplement quelque chose de 1 pouce de large et mesurez-le en pixels!

HTML:

<div id="dpi"></div>

Style:

#dpi {
  height: 1in;
  left: -100%;
  position: absolute;
  top: -100%;
  width: 1in;
}

Javascript:

function getDPI() {
  return document.getElementById("dpi").offsetHeight;
}
39
Ryan

Vous pouvez utiliser le window.devicePixelRatio , propriété pour obtenir le rapport d'échelle de l'écran/page. Cela fonctionne bien dans IE actuel, Edge, Chrome et Firefox sur le bureau (Windows), mais il ne semble pas être une norme actuelle. Il renvoie 1 sur mon ordinateur de bureau avec un classique moniteur et 2 sur la surface avec une échelle de 200%. Les valeurs devraient varier de 1,0 à 3,0 ces jours-ci. Je pourrais l'utiliser pour corriger la taille de la portion d'image dynamique pour fournir des images plus nettes sur les écrans haute résolution.

Si vous avez besoin de ppp/ppi logiques, multipliez cette valeur par 96. Ce ne sera pas le ppi physique réel, juste ce que le système d'exploitation le traite.

17
ygoe

Je ne connais aucun moyen, cependant, ils peuvent être une solution alternative:

Spécifiez vos mesures en "pt" et "em", qui sont des mesures relatives à l'écran.

http://www.w3schools.com/cssref/css_units.asp

https://css-tricks.com/the-lengths-of-css/

  • em:
    1em est égal à la taille de police actuelle. 2em signifie 2 fois la taille de la police actuelle. Par exemple, si un élément est affiché avec une police de 12 pt, puis '2em' est 24 pt. Le 'em' est une unité très utile en CSS, car elle peut s'adapter automatiquement à la police utilisée par le lecteur
  • pt:
    point (1 pt est le même que 1/72 inch)
  • pc:
    pica (1 pc est le même que 12 points)
4
Kent Fredric