2012-02-15 13 views
14

La única manera que he encontrado hasta ahora, es conseguir que el offsetWidth, offsetHeight de un div elemento de prueba con height y width de una pulgada: http://www.infobyip.com/detectmonitordpi.phpCómo detectar el DPI pantalla utilizando JavaScript

¿Hay una manera de detectar la pantalla DPI a través de JavaScript en su lugar?

Gracias,

Atara.

+0

Esto dependería de que la pantalla DPI se calibre con precisión en primer lugar. – Quentin

+0

Esa _es_ una función de JavaScript, ¿no? :) – AKX

+1

El enfoque que has descrito es la única forma sensata en que puedo pensar de hacerlo en JavaScript. En cuanto a PHP, todo lo que finalmente hace es renderizar texto. No sabe ni le importa cómo el cliente muestra ese texto. Recuerde, literalmente, cualquier cosa puede conectarse a su servidor web y solicitar una página PHP, algunos de ellos ni siquiera tienen una pantalla gráfica (googlebot, sesiones de curl, navegadores en línea y lectores de pantalla, etc.) – GordonM

Respuesta

11
<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div> 
<script type='text/javascript'> 
    dpi_x = document.getElementById('testdiv').offsetWidth; 
    dpi_y = document.getElementById('testdiv').offsetHeight; 
</script> 

continuación, puede utilizar jQuery para enviar dpi_x y dpi_y que esto a su servidor

http://jsfiddle.net/sxfv3/

+0

Este es el código del enlace que encontré. ¿No hay una función simple para devolver estos valores? – Atara

+0

Sí, es de su enlace. Supongo que no hay una función javascript definida para devolverle DPI. Pero esta solución también es fácil – Lixas

+0

Creo que esta solución es la más confiable. –

21

En webkit puede detectar si su usuario tiene una llamada "pantalla de alta dpi" simplemente recuperando el valor de window.devicePixelRatio.

Las pantallas de dpi normales devolverán 1. El iPhone 4 devolverá 2, pero también son posibles números como 1.8 o 2.12.

+2

Incluso si esto no es estándar (todavía), ahora es compatible con Firefox (a partir de 18.0) y Opera y Opera Mobile -pero aún no es IE. Y, por supuesto, algunas personas no tienen los últimos navegadores. – abarnert

+0

No es perfecto, pero es un buen puntero.Gracias, y +1 :) – Archer

4

No existe, hasta ahora, una solución estándar y compatible en todo el mundo.

window.devicePixelRatio, como lo sugiere laurens peeters, funciona si no te importa IE, o cualquier navegador de la antigüedad, como principios de enero de 2013 (por ejemplo, Firefox 17).

Consulte Cross Browser Retina/High Resolution Media Queries (y varios comentarios y enlaces) para obtener esta información a finales de 2012, pero tendrá que seguir buscando y ajustando su código, de tanto en tanto, hasta que algo finalmente se estandarice, y implementado en todos los navegadores, con la adopción de una versión lo suficientemente amplia como para que pueda dejar de preocuparse por las versiones anteriores ...

+3

dpr NO es lo mismo que PPP .. dpi = cuantos píxeles por pulgada. dpr = relación de píxeles a la pantalla. que es 1 para la mayoría, excepto dispositivos de alta densidad. –

+0

Puede obtener dpi de dpr como este: DPI = 96 * dpr. En navegadores (y solo en navegadores), DPI de 96 es el dpr de 1. En algún momento alguien decidió (y el resto lo siguió), que 96px es 1 pulgada física en los navegadores (lo cual es bueno, siempre y cuando puede acceder al dpr). En la pantalla de Windows 10 y 4K, devuelve correctamente dpr de 2.5. Hubiera pensado que también se devuelve el dpr correcto para pantallas FullHD (realmente depende de la configuración de DPI en su sistema operativo, y no de la resolución de su pantalla) –

Cuestiones relacionadas