Pregunta

Estoy luchando con una consulta de medios que intenta apuntar las pantallas de retina. Tengo esta consulta de los medios de comunicación;

@media(-webkit-min-device-pixel-ration:2)and (min-resolution:192dpi) {}

En Chrome Canary DevTools, obtiene el estilo, pero lo está probando en una pantalla de Retina en realidad (iPhone 5S en este caso) no.

También uso esta viewPort para que las escale todo, intenté eliminarlo, pero no hizo ninguna diferencia en mi problema anterior.

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=0.5 maximum-scale=0.5, user-scalable=no target-densitydpi=device-dpi">

¿Alguna idea de por qué tengo este problema?

¿Fue útil?

Solución

Pruebe esta consulta de los medios, funciona

@media  
only screen and (-webkit-min-device-pixel-ratio: 2),  
only screen and ( min--moz-device-pixel-ratio: 2),  
only screen and ( -o-min-device-pixel-ratio: 2/1),  
only screen and ( min-device-pixel-ratio: 2),  
only screen and ( min-resolution: 192dpi),  
only screen and ( min-resolution: 2dppx){
   //your css goes here..
}  

también cambia la visor

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top