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

smartphone screen dpi

Question

Esta pregunta ya tiene una respuesta aquí:

• Detectando el sistema DPI / PPI desde JS / CSS? 11 respuestas

¿Hay alguna forma 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 está configurado en grande (120), descarta la posición. Necesito poder saber qué es el DPI para poder ajustar la posición en consecuencia.

Answer 1

Parece que puede usar el objeto DOM de ''pantalla'' en IE, tiene propiedades para el dispositivo XDPI, deviceYDPI, logicalXDPI, logicalYDPI.

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

Aquí hay una solución de http://www.webdeveloper.com/forum/showthread.php?t=175278 (no lo he probado, parece un truco total :) ¡Solo crea algo de 1 pulgada de ancho y mídelo 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 2

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

DPI no es exactamente una parte de "configuración de visualización". Es (mal) usado 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. Más...
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. Más...

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

• Las dimensiones de la imagen de origen: esta es la cantidad de píxeles o datos que hay.
• 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 está utilizando 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.

La conclusión es que la imagen que está imprimiendo se muestreará (reducirá o ampliará) de manera efectiva para que coincida con el DPI 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 tu 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 cuán 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?) Usar 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 debería 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.

• Malentendidos sobre dpi
• DPI, PPI, píxeles - hechos y falacias

Answer 3

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

Especifique sus medidas en ''pt'' y ''em'', que son métricas relativas a la 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 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 se puede adaptar automáticamente a la fuente que usa el lector
• pt:
  punto ( 1 pt punto es lo mismo que 1/72 inch )
• ordenador personal:
  pica ( 1 pc es lo mismo que 12 points )

Answer 4

Puede usar 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);
$(".SCREENDPITEST").remove()
document.write(screen.dpi)
})

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