¿Cómo acceder a la configuración de DPI de la pantalla a través de javascript?

Question

¿Hay alguna manera de acceder a la configuración de DPI de la pantalla en una función de Javascript?

Estoy tratando de colocar un panel HTML en la página y cuando el DPI del usuario se establece en grande (120), se descarta la posición. Necesito poder saber qué es el DPI para poder ajustar la posición en consecuencia.

Answer 1

en primer lugar, para ayudar con la posible (y muy común) confusión con el término DPI (puntos por pulgada):

DPI no es exactamente una parte de "configuración de pantalla". Se usa (incorrectamente) en dos contextos diferentes:

1. Los píxeles nativos por pulgada de una pantalla (o video). Determina cuán pequeños son los píxeles. Puede tener la misma resolución de 1024x768 tanto en una pantalla de computadora portátil de 14 "como en una de 17". El primero sería aproximadamente 1280/14 = 91 DPI y el último sería aproximadamente 1280/17 = 75 DPI. El DPI de una pantalla es inmutable; no se puede cambiar con la configuración de visualización. More...
2. Los puntos por pulgada pintados en papel durante la impresión. Este es el número de puntos uno al lado del otro que una impresora/fotocopiadora/máquina de fax puede imprimir en una pulgada de papel. La mayoría de las impresoras pueden configurarse para imprimir con un DPI más bajo, simplemente imprimiendo cada punto como dos, cuatro, etc. puntos. More...

Al imprimir una imagen, hay muchas cosas que afectan a las dimensiones finales de la imagen en el papel:

• Las dimensiones de la imagen de origen - esta es la cantidad de píxeles o datos allí es.
• El DPI de la imagen de origen. Este valor determina cómo deben interpretarse las dimensiones al imprimir la imagen.
• Si la imagen de origen no tiene información de DPI integrada (un JPEG puede tener una, un GIF nunca lo hace), el programa que se usa puede tener configuraciones para especificar un DPI. Esto podría ser un visor/editor de imágenes o incluso un navegador web.
• El factor de zoom que normalmente se especifica en un cuadro de diálogo de impresión.
• La configuración actual de DPI de la impresora.
• El DPI físico (máximo) de la impresora.

En resumen, la imagen que está imprimiendo se volverá a muestrear (reducirá o ampliará) para que coincida con el PPP final que se utiliza en el proceso de impresión. Cualquiera de las partes involucradas puede estar causando esto (el programa, el controlador de impresión, la impresora).

Ahora, volviendo a su pregunta. No, no puede determinar el DPI de la pantalla, porque no está en el dominio del software. Es un término de dominio de hardware que describe qué tan grande es el monitor que un usuario puede permitirse comprar.Actualización: Inicialmente escribí esta respuesta en 2009, con mi comprensión de las tecnologías actuales. Como @thure señaló, ahora puede (desde 2012?) Utilizar la función window.matchMedia para determinar el DPI de la pantalla.

Si está tratando de lograr precisión en la impresión de un diseño HTML, como otros han sugerido, su CSS debe usar dimensiones de impresión como em, pt o pc en lugar de px. Sin embargo, el resultado final aún puede depender del uso del navegador. Si convertir su HTML a PDF (o generar PDF desde cero) es una opción para usted, la impresión de un PDF le daría el WYSIWYG más real, tanto en pantalla como en papel.

• Misunderstandings about dpi
• DPI, PPI, Pixels - Facts and Fallacies

Answer 2

No hay una manera que yo sepa, sin embargo, pueden ser una solución alternativa:

especificar sus mediciones en 'pt' y 'em', que son las métricas relativas pantalla.

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

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

• em:
  1em es igual al tamaño de la fuente actual. 2em significa 2 veces el tamaño de la fuente actual. Por ejemplo, si un elemento se muestra con una fuente de 12 pt, entonces '2em' es 24 pt. El 'em' es una unidad muy útil en CSS, ya que puede adaptarse automáticamente a la fuente que utiliza el lector de
• pt:
  punto (1 pt es el mismo que 1/72 inch)
• pc:
  pica (1 pc es el mismo como 12 points)

Answer 3

parece que se puede utilizar el objeto 'pantalla' DOM en el IE, sus propiedades consiguió para deviceXDPI, deviceYDPI, logicalXDPI, logicalYDPI.

hxxp: //www.w3schools.com/htmldom/dom_obj_screen.asp

Aquí está una solución de http://www.webdeveloper.com/forum/showthread.php?t=175278 (No Lo He intentado, parece que un corte total de :) Basta con crear algo de 1 pulgada de ancho y medirlo en píxeles!

HTML:

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

Estilo:

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

Javascript:

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

Answer 4

Es posible utilizar la propiedad window.devicePixelRatio para obtener la relación de escala de la pantalla/página. Esto funciona bien en IE, Edge, Chrome y Firefox actuales en el escritorio (Windows), pero no parece ser un estándar actual. Devuelve 1 en mi PC de escritorio con un monitor convencional y 2 en la superficie con escala de 200%. Los valores deberían oscilar entre 1.0 y 3.0 en estos días. Podría usar esto para corregir el tamaño de porción de imagen dinámica para proporcionar imágenes más nítidas en pantallas de alta resolución.

Si necesita algunos dpi/ppi lógicos, multiplique ese valor por 96. Sin embargo, no será el ppi físico real, simplemente como lo trata el sistema operativo.

Answer 5

$(document).ready(function(){ 
 
     $("body").append("<div style='poosition:fixed;width:1cm;height:1cm;'class='SCREENDPITEST'></div>") 
 
     screen.dpi = Math.floor($(".SCREENDPITEST").width() * 2.54); 
 
    \t $(".SCREENDPITEST").remove() 
 
     document.write(screen.dpi) 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>