soporte - Obtener las dimensiones de la pantalla física/ppp/densidad de píxeles en Chrome en Android
que es la densidad de pixeles en un celular (10)
Pregunta
¿Hay alguna manera segura de obtener las dimensiones físicas de la pantalla realmente correctas en Chrome, en Android? Si es necesario, las versiones antiguas de Chrome y Android pueden quedar fuera del alcance.
Investigaciones anteriores
Hay numerosas preguntas sin salida en stackoverflow sobre cómo obtener las dimensiones reales de la pantalla física de un dispositivo desde javascript (o css). Parece que no hay convergencia entre la estandarización html api y las implementaciones reales del navegador, sin mencionar que la implementación del navegador depende de las API del sistema operativo que a su vez dependen de que el hardware proporcione la información correcta.
Por cierto, algunas respuestas anteriores son arcanas (año 2011 y similares) al asumir una cierta densidad de píxeles que prevalecía en ese momento, y por lo tanto inútiles. Otros se relacionan con webkit, pero Chrome parpadeó reemplazando webkit en chrome (?).
Me gustaría explorar la existencia de una solución simple restringiendo las cosas solo a Chrome en Android.
Nota
Se trata de una solución javascript (o css) dentro del navegador, no una solución para una aplicación nativa.
Abordé este problema con uno de mis proyectos web http://www.vinodiscover.com. La respuesta es que no se puede saber con certeza cuál es el tamaño físico, pero se puede obtener una aproximación. Usando JS y / o CSS, puede encontrar el ancho y alto de la vista / pantalla, y la densidad de píxeles usando consultas de medios. Por ejemplo: iPhone 5 (326 ppp) = 320px por 568px y una densidad de 2.0 píxeles, mientras que un Samsung Galaxy S4 (441ppi) = 360px x 640px y una densidad de 3.0 píxeles. Efectivamente, una densidad de 1.0 pixel es de alrededor de 150 ppi.
Dado esto, configuré mi CSS para mostrar 1 columna cuando el ancho es inferior a 284px, independientemente de la densidad de píxeles; luego dos columnas entre 284px y 568px; luego 3 columnas arriba de 852px. Es mucho más simple de lo que parece, ya que los navegadores ahora hacen los cálculos de densidad de píxeles automáticamente.
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
Basado en la respuesta de Matt, hice una prueba:
// on Macbook Pro Retina (2880x1800, 15.4"), is the calculated diagonal size
// approximately 15.4? Let''s see...
var svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var screenWidthMillimeters = svgEl.screenPixelToMillimeterX * 2880;
var screenHeightMillimeters = svgEl.screenPixelToMillimeterY * 1800;
var screenDiagonalMillimeters = Math.sqrt(Math.pow(screenWidthMillimeters, 2) + Math.pow(screenHeightMillimeters, 2)); // pythagorean theorem
var screenDiagonalInches = (screenDiagonalMillimeters / 10 / 2.54); // (mm / 10mm/cm) / 2.54cm/in = in
console.log("The calculated diagonal of the screen is "+screenDiagonalInches+" inches. /nIs that close to the actual 15.4/"?");
Este es el resultado:
The calculated diagonal of the screen is 35.37742738560738 inches.
Is that close to the actual value of 15.4?
Nop.
Entonces parece que no hay forma de obtener valores físicos reales en un navegador web.
Como respuesta a la respuesta de zehelvion sobre el uso de WURFL para encontrar la resolución, también vale la pena mencionar que WURFL también está disponible como un fragmento de JavaScript .
En la edición gratuita que se ofrece en wurfl.io , no obtendrá información sobre la pantalla y resolución (solo el nombre del dispositivo, el factor de forma y el móvil / no móvil), pero también hay una versión comercial con más capacidades disponibles aquí .
Los píxeles CSS no son realmente nuestro "píxel independiente del dispositivo". La plataforma web consiste en una variedad de tipos de dispositivos. Si bien los píxeles CSS parecen bastante consistentes en los dispositivos portátiles, serán un 50% más grandes en un monitor de escritorio típico de 96dpi. Ver mi question Esto realmente no es algo malo en algunos casos, por ejemplo, las fuentes deberían ser más grandes en una pantalla más grande, ya que la distancia al ojo es más grande. Pero las dimensiones del elemento ui deben ser bastante consistentes. Digamos que su aplicación tiene una barra superior, prefiere que tenga el mismo grosor en computadoras de escritorio y en dispositivos móviles, de manera predeterminada será 50% más pequeña, lo que no es bueno, ya que los elementos táctiles deberían ser más grandes. La única solución que he encontrado es aplicar diferentes estilos en función del dispositivo DPI.
Puede obtener una pantalla DPI en JavaScript con window.devicePixelRatio. O consulta CSS:
@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 13/10),
only screen and (min-resolution: 120dpi)
{
/* specific styles for handhelds/ high dpi monitors*/
}
Sin embargo, no sé cómo aplicar esto funcionaría en un monitor de escritorio de alta resolución. Quizás los elementos serían demasiado pequeños. Es realmente una pena que la plataforma web no ofrezca nada mejor. Supongo que la implementación de la inmersión no sería demasiado difícil.
Puede crear cualquier elemento de página y establecer su ancho usando unidades físicas reales. Por ejemplo
<div id="meter" style="width:10cm"></div>
Y luego obtiene su ancho en píxeles. Por ejemplo, el código html a continuación (utilicé JQuery) muestra el ancho de la pantalla del dispositivo en centímetros
<script>
var pixPer10CM = $(''#meter'').width();
var CMPerPix = 10 / pixPer10CM;
var widthCM = screen.width * CMPerPix;
alert(widthCM);
</script>
Puede obtener una estimación aproximada de tamaño, pero no es precisa.
He creado un ejemplo que he probado en un par de dispositivos para ver cuáles fueron los resultados. Mi iPhone 6 arroja valores un 33% más grandes. Mi monitor de escritorio de 27 "en mi Mac informó como un monitor de 30".
var $el = document.createElement(''div'');
$el.style.width = ''1cm'';
$el.style.height = ''1cm'';
$el.style.backgroundColor = ''#ff0000'';
$el.style.position = ''fixed'';
$el.style.bottom = 0;
document.body.appendChild($el);
var screenDiagonal = Math.sqrt(Math.pow((window.screen.width / $el.offsetWidth), 2) + Math.pow((window.screen.height / $el.offsetHeight), 2));
var screenDiagonalInches = (screenDiagonal / 2.54);
var str = [
''1cm (W): '' + $el.offsetWidth + ''px'',
''1cm (H): '' + $el.offsetHeight + ''px'',
''Screen width: '' + window.screen.width + ''px'',
''Screen height: '' + window.screen.height + ''px'',
''Browser width: '' + window.innerWidth + ''px'',
''Browser height: '' + window.innerHeight + ''px'',
''Screen available width: '' + window.screen.availWidth + ''px'',
''Screen available height: '' + window.screen.availHeight + ''px'',
''Screen width: '' + (window.screen.width / $el.offsetWidth).toFixed(2) + ''cm'',
''Screen height: '' + (window.screen.height / $el.offsetHeight).toFixed(2) + ''cm'',
''Screen diagonal: '' + screenDiagonal.toFixed(2) + ''cm'',
''Screen diagonal: '' + screenDiagonalInches.toFixed(2) + ''in'',
''Device Pixel Ratio: '' + (window.devicePixelRatio || 1)
].join(''/n'');
var $pre = document.createElement(''pre'');
$pre.innerHTML = str;
document.body.appendChild($pre);
Puedes obtener esa información con WURFL:
Propiedades de visualización del dispositivo
Los atributos se llaman:
resolution_(width|height)
physical_display_(width|height)
Versión larga:
La mejor y más confiable estrategia para lograr esto es enviar la user agent string desde el navegador a un DB como WURFL (u otro) base de datos actualizada que pueda proporcionar la información necesaria.
Esta es una información que todos los navegadores modernos pueden proporcionar; Expone información sobre el dispositivo y su sistema operativo. Simplemente no es lo suficientemente significativo para su aplicación sin la ayuda de un diccionario como WURFL .
Esta es una base de datos comúnmente utilizada para detectar propiedades del dispositivo.
Con él, es posible que pueda admitir con precisión la mayoría de los dispositivos populares en el mercado. Publicaba una demostración del código, pero una está disponible con la descarga en el sitio de WURFL . Puede encontrar una demostración de este tipo en la carpeta ejemplos / demostración que se descarga con la biblioteca.
Aquí hay más información y explicación sobre cómo verificar el tamaño físico y la resolución: http://www.scientiamobile.com/forum/viewtopic.php?f=16&t=286
Realmente no se pueden obtener las dimensiones físicas reales o el DPI real y, aunque se pudiera, no se puede hacer nada con ellos.
Esta es una historia bastante larga y compleja, así que discúlpeme.
La web y todos los navegadores definen 1px como una unidad llamada pixel CSS. Un píxel CSS no es un píxel real, sino una unidad que se considera de 1/96 de pulgada según el ángulo de visión del dispositivo. Esto se especifica como un píxel de referencia .
El píxel de referencia es el ángulo visual de un píxel en un dispositivo con una densidad de píxeles de 96 ppp y una distancia desde el lector de un brazo de longitud. Para un brazo de longitud nominal de 28 pulgadas, el ángulo visual es, por lo tanto, de alrededor de 0.0213 grados. Para leer con la longitud de un brazo, 1px corresponde a aproximadamente 0.26 mm (1/96 pulgada).
En 0.26mm de espacio podríamos tener muchos píxeles de dispositivos reales.
El navegador hace esto principalmente por razones heredadas, la mayoría de los monitores eran de 96 ppp cuando nació la web, pero también por coherencia, en los "viejos tiempos" un botón de 22 píxeles en una pantalla de 15 pulgadas a 800x600 duplicaba el tamaño de un botón de 22 píxeles. un monitor de 15 pulgadas a 1600x1200. En este caso, el DPI de la pantalla es en realidad 2x (dos veces la resolución horizontalmente pero en el mismo espacio físico). Esta es una mala situación para la web y las aplicaciones, por lo que la mayoría de los sistemas operativos idearon muchas formas de abstraer valores de píxeles en unidades independientes del dispositivo (DIPS en Android, PT en iOS y CSS Pixel en la web ).
El navegador iPhone Safari fue el primero (que yo sepa) para presentar el concepto de una ventana gráfica. Esto se creó para permitir que las aplicaciones de estilo de escritorio completo se procesen en una pantalla pequeña. La ventana gráfica se definió como de 960 píxeles de ancho. Esto esencialmente amplió la página 3 veces (el iphone era originalmente de 320 píxeles), por lo que 1 píxel CSS es 1/3 de un píxel físico. Cuando definió una ventana gráfica, pudo lograr que este dispositivo coincidiera con 1 píxel CSS = 1 píxel real a 163 ppp.
Al usar una ventana gráfica en la que el ancho es "ancho del dispositivo" lo libera de tener que establecer el ancho de la ventana gráfica según el dispositivo al tamaño de píxel de CSS óptimo, el navegador simplemente lo hace por usted.
Con la introducción de dispositivos DPI dobles, los fabricantes de teléfonos móviles no querían que las páginas móviles parecieran un 50% más pequeñas por lo que introdujeron un concepto llamado dispositivo PixelRatio (primero en el kit web móvil, creo), esto les permite mantener 1 píxel CSS aproximadamente 1 / 96 de pulgada, pero le permite comprender que sus activos, como las imágenes, pueden necesitar el doble de tamaño. Si miras la serie de iPhone, todos sus dispositivos dicen que el ancho de la pantalla en píxeles CSS es de 320px , aunque sabemos que esto no es cierto.
Por lo tanto, si hizo que un botón fuera 22px en el espacio CSS, la representación en la pantalla física es 22 * proporción de píxeles del dispositivo. De hecho, digo esto, no es exactamente esto porque la proporción de píxeles del dispositivo nunca es exacta, los fabricantes de teléfonos lo configuraron en un buen número como 2.0, 3.0 en lugar de 2.1329857289918 ....
En resumen, los píxeles CSS son independientes del dispositivo y no nos debemos preocupar por el tamaño físico de las pantallas y las densidades de visualización, etc.
La moraleja de la historia es: no se preocupe por comprender el tamaño de píxel físico de la pantalla. No lo necesitas. 50px debería verse más o menos igual en todos los dispositivos móviles, podría variar un poco, pero el CSS Pixel es nuestra forma independiente de dispositivo para construir documentos consistentes y UI''s
Recursos:
- https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/set-the-viewport
- https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/size-content-to-the-viewport
- http://viewportsizes.com/
- http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
- http://en.wikipedia.org/wiki/Device_independent_pixel
- http://www.w3.org/TR/css3-values/#absolute-lengths
- https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
Usando la función getPPI () ( Mobile web: cómo obtener el tamaño de píxel físico? ), Para obtener una identificación de una pulgada use esta fórmula:
var ppi = getPPI();
var x = ppi * devicePixelRatio * screen.pixelDepth / 24;
$(''#Cubo'').width (x);
$(''#Cubo'').height(x);
<div id="Cubo" style="background-color:red;"></div>
JqueryMobile ancho del elemento
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document
JqueryMobile Altura del elemento
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
Buena suerte Danny117