javascript - samsung - Detectando el sistema DPI/PPI desde JS/CSS?
smartphone screen dpi (12)
¿No puedes hacer otra cosa? Por ejemplo, si está generando una imagen para ser reconocida por una cámara (es decir, ejecuta su programa, deslice su teléfono celular a través de una cámara, ocurre magia), ¿no puede usar algo independiente del tamaño?
Si se trata de una aplicación que se implementará en entornos controlados, ¿puede proporcionar una utilidad de calibración? (Puede hacer algo simple como imprimir tarjetas de presentación con una pequeña regla, usarlo durante el proceso de calibración).
Estoy trabajando en un tipo de aplicación única que necesita generar imágenes a resoluciones específicas de acuerdo con el dispositivo en el que se muestran. Por lo tanto, la salida es diferente en un navegador de Windows normal (96ppi), iPhone (163ppi), Android G1 (180ppi) y otros dispositivos. Me pregunto si hay una manera de detectar esto automáticamente.
Mi investigación inicial parece decir que no. La única sugerencia que he visto es hacer un elemento cuyo ancho se especifique como "1in" en CSS, luego verifique su offsetWidth (consulte también Cómo acceder a la configuración de DPI de la pantalla de visualización mediante javascript? ). Tiene sentido, pero iPhone me está mintiendo con esa técnica, diciendo que es 96ppi.
Otro enfoque podría ser obtener las dimensiones de la pantalla en pulgadas y luego dividir por el ancho en píxeles, pero tampoco estoy seguro de cómo hacerlo.
Acabo de encontrar este enlace: http://dpi.lv/ . Básicamente es una herramienta web para descubrir la resolución del dispositivo del cliente, ppp y tamaño de pantalla.
Visité en mi computadora y teléfono móvil y proporciona la resolución correcta y DPI para mí. Hay un repositorio de Github para que puedas ver cómo funciona.
Creo que su mejor enfoque es combinar la sugerencia de la imagen "sniffer" con una matriz de DPI conocidos para dispositivos (a través del agente de usuario y otros métodos). No será exacto y será difícil de mantener, pero sin saber más sobre la aplicación que estás tratando de hacer, es la mejor sugerencia que puedo ofrecerte.
DPI está por definición vinculado al tamaño físico de la pantalla. Por lo tanto, no podrá tener el DPI real sin conocer exactamente el hardware que está detrás.
Los sistemas operativos modernos acordaron un valor común para tener pantallas compatibles: 96 ppp. Es una pena, pero eso es un hecho.
Deberá confiar en olfatear para poder adivinar el tamaño de pantalla real necesario para calcular la resolución (DPI = PixelSize / ScreenSize).
Esto es lo que funciona para mí (pero no lo probé en teléfonos móviles):
<body><div id="ppitest" style="width:1in;visible:hidden;padding:0px"></div></body>
Luego puse en .js: screenPPI = document.getElementById(''ppitest'').offsetWidth;
Esto me dio 96, que corresponde a mi ppi de mi sistema.
Genere una lista de DPI conocido: https://.com/a/6793227
Detecta el dispositivo exacto. Usando algo como:
navigator.userAgent.toLowerCase();
Por ejemplo, al detectar un dispositivo móvil:
window.isMobile=/iphone|ipod|ipad|android|blackberry|opera mini|opera mobi|skyfire|maemo|windows phone|palm|iemobile|symbian|symbianos|fennec/i.test(navigator.userAgent.toLowerCase());
¡Y ganancia!
La respuesta de @Endless es bastante buena, pero no legible en absoluto, esta es una aproximación similar con mín / máx fijo (deberían ser buenas)
var dpi = (function () {
for (var i = 56; i < 2000; i++) {
if (matchMedia("(max-resolution: " + i + "dpi)").matches === true) {
return i;
}
}
return i;
})();
MatchMedia ahora está bien soportado y debería dar buenos resultados, ver http://caniuse.com/#feat=matchmedia
Tenga cuidado de que el navegador no le proporcione la pantalla exacta en dpi, sino solo una aproximación
Se me ocurrió una manera que no requiere el DOM ... en absoluto
El DOM puede ser complicado, requiriendo que agregues cosas al cuerpo sin saber qué cosas están pasando con el width: x !important en tu hoja de estilos. También tendrías que esperar a que el DOM esté listo para usar ...
// Binary search, (faster then loop)
// also don''t test every possible value, since it tries low, mid, and high
// http://www.geeksforgeeks.org/find-the-point-where-a-function-becomes-negative/
function findFirstPositive(b, a, i, c) {
c=(d,e)=>e>=d?(a=d+(e-d)/2,0<b(a)&&(a==d||0>=b(a-1))?a:0>=b(a)?c(a+1,e):c(d,a-1)):-1
for (i = 1; 0 >= b(i);) i *= 2
return c(i / 2, i)|0
}
var dpi = findFirstPositive(x => matchMedia(`(max-resolution: ${x}dpi)`).matches)
console.log(dpi)
También necesitaba mostrar la misma imagen en el mismo tamaño con diferentes ppp de pantalla, pero solo para Windows IE. Solía:
<img src="image.jpg" style=" height:expression(scale(438, 192)); width:expression(scale(270, 192))" /> function scale(x, dpi) { // dpi is for orignal dimensions of the image return x * screen.deviceXDPI/dpi; }
En este caso, el ancho / alto de la imagen original son 270 y 438 y la imagen se desarrolló en una pantalla de 192 ppp. screen.deviceXDPI no está definido en Chrome y la función de escala debería actualizarse para admitir navegadores distintos de IE
Existe la resolution consulta de medios CSS: le permite limitar estilos CSS a resoluciones específicas:
Sin embargo, solo es compatible con Firefox 3.5 y superior, Opera 9 y superior e IE 9 . Otros navegadores no aplicarán sus estilos específicos de resolución (aunque no he verificado los navegadores que no son de escritorio).
<div id=''testdiv'' style=''height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;''></div>
<script type=''text/javascript''>
var devicePixelRatio = window.devicePixelRatio || 1;
dpi_x = document.getElementById(''testdiv'').offsetWidth * devicePixelRatio;
dpi_y = document.getElementById(''testdiv'').offsetHeight * devicePixelRatio;
console.log(dpi_x, dpi_y);
</script>
agarrado desde aquí http://www.infobyip.com/detectmonitordpi.php . Funciona en dispositivos móviles! (Android 4.2.2 probado)
function getPPI(){
// create an empty element
var div = document.createElement("div");
// give it an absolute size of one inch
div.style.width="1in";
// append it to the body
var body = document.getElementsByTagName("body")[0];
body.appendChild(div);
// read the computed width
var ppi = document.defaultView.getComputedStyle(div, null).getPropertyValue(''width'');
// remove it again
body.removeChild(div);
// and return the value
return parseFloat(ppi);
}
(De VodaFone)