javascript - tamaño - proporcion de pixeles photoshop

¿Cuáles son las mejores prácticas para detectar la proporción de píxeles/densidad?

Question

Actualmente estoy usando JavaScript para la detección de dispositivos móviles en mi sitio web, lo que me permite ofrecer contenido diferente para usuarios móviles o de escritorio.

Actualmente utilizo window.devicePixelRatio y screen.width para calcular si el usuario está en un dispositivo móvil o no, de este modo:

var isMobileScreenWidth = ((screen.width / window.devicePixelRatio) < 768)

768px es el punto en el que definimos móvil o computadora de escritorio, de modo que 767 e inferior es móvil y 768 y superior es computadora de escritorio.

Esto funciona perfectamente, pero recientemente me he topado con un problema con Firefox, cuando Firefox se window.devicePixelRatio y cambia la window.devicePixelRatio , así que:

zoom = 30%, window.devicePixelRatio = 0.3
zoom = 100%, window.devicePixelRatio = 1.0
zoom = 300%, window.devicePixelRatio = 3.0

Esto ahora me causa un problema porque cualquier usuario que tenga su navegador ampliado en Firefox obtiene la versión móvil del sitio.

Me preguntaba si alguien sabía de una forma diferente o mejor de obtener la densidad de píxeles que está separada de los navegadores de escritorio.

También utilizo una pequeña cantidad de detección de agente de usuario, pero como es un trabajo masivo mantenerse al día con la lista en constante cambio de agentes de usuario móviles, no me es posible depender tanto de la resolución de pantalla como del agente de usuario. hora.

Si alguien tiene alguna idea sobre esto y puede ayudar, eso sería increíble.

ACTUALIZAR:

Acabo de encontrar esto:

window.screen.availWidth / document.documentElement.clientWidth

Esta breve parte de las matemáticas se sugiere en este post:

window.devicePixelRatio no funciona en IE 10 Mobile?

Lo he probado y funciona en Firefox, y resuelve mi problema, pero desafortunadamente ahora causa un problema en Chrome, así que:

Chrome zoom = 100%,
window.devicePixelRatio = 1.0,
window.screen.availWidth / document.documentElement.clientWidth = 3.0

Parece que no puedo encontrar una solución sólida que funcione para todo.

Answer 1

Debe aprovechar la sugerencia del fabricante a través de la función <meta name="viewport" content="width=device-width"/> o @-ms-viewport {width:device-width} . Básicamente, expone el zoom predeterminado que el fabricante del dispositivo considera óptimo dada la densidad de píxeles de la pantalla. Después de hacer eso, cuando llames a window.innerWidth , obtendrás para qué fue diseñada tu ecuación original pero sin depender de una medida de densidad de píxeles.

Evite confiar en window.devicePixelRatio para cualquier cosa. Su significado y el valor que retorna se encuentran actualmente en un estado de flujo y cualquier cosa que haga en este momento basada en él probablemente se romperá muy pronto.

Nota: Meta viewport solo funciona en Android, iOS y Windows Phone 8. @-ms-viewport solo funciona (correctamente) en IE10 Metro y puede interferir con el comportamiento correcto de Meta viewport en Windows Phone 8.