Problema de consultas de medios CSS con dispositivos iOS

Tengo las siguientes consultas de medios configuradas para apuntar a varios dispositivos iOS (iPad3, iPad2, iPhone4, iPhone3). Cuando cargo esta página con un iPhone3 y un iPad2, los divs correctos se colorean. Sin embargo, cuando cargo esta página con un iPad3, los estilos iPad2 y iPhone4 se cargan, pero NO el iPad3. (No se puede probar el iPhone4 en este momento.) ¿Alguna idea?Problema de consultas de medios CSS con dispositivos iOS

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> 
<link rel="stylesheet" href="ipad3.css" media="only screen and (min-device-width:1536px) and (max-device-width:2048px) and (-webkit-min-device-pixel-ratio:2)" type="text/css" /> 
<link rel="stylesheet" href="ipad2.css" media="only screen and (min-device-width:768px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:0)" type="text/css" /> 
<link rel="stylesheet" href="iphone4.css" media="only screen and (min-device-width:640px) and (max-device-width:960px) and (-webkit-min-device-pixel-ratio:2)" type="text/css" /> 
<link rel="stylesheet" href="iphone3.css" media="only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:0)" type="text/css" /> 
</head> 

<body> 
<div id="ipad3" style="width:200px;height:200px;border:1px solid black"></div> 
<div id="ipad2" style="width:200px;height:200px;border:1px solid black"></div> 
<div id="iphone4" style="width:200px;height:200px;border:1px solid black"></div> 
<div id="iphone3" style="width:200px;height:200px;border:1px solid black"></div> 

ipad3 should be RED 
<br> 
ipad2 should be GREEN 
<br> 
iphone4 should be BLUE 
<br> 
iphone3 should be ORANGE 
</body> 
</html>

..y los 4 archivos CSS son codificados en consecuencia (este ejemplo es el archivo iPad3.css):

#ipad3 { background-color: red; }

Fuente

2012-05-04 Rob Lauer

¿Por qué eliminaste esta pregunta solo para volver a preguntarla? – BoltClock

Aclaré el problema significativamente y proporcioné un ejemplo fácil para que las personas lo prueben, mejor que simplemente editar el original. –

Debido a que tiene el ancho de la ventana se establece en el dispositivo de ancho, la resolución de la pantalla iPad3 seguirá recibiendo reportado como 1024x768, pero la proporción de píxeles de dispositivo estará 2.

Fuente

2012-05-04 20:47:38

Gracias, eso me acerca. Si configuro la consulta de medios de iPad3 a 1024x768, está recogiendo los archivos iPad3.css y iPad2.css. Parece que está ignorando la configuración de la proporción -webkit-min-device-pixel. Lo mismo para el iPhone4 (iPad2 y iPhone3 funcionan bien). ¿Algunas ideas? –

Para apuntar el iPad 3 que puede utilizar:

<link rel="stylesheet" href="ipad3.css" media="only screen and (min-device-width:768px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:1.5)" type="text/css" />

Las dimensiones en píxeles son las mismas, pero la proporción de píxeles cambia en comparación con el iPad original y el iPad 2.

Fuente

2012-09-25 07:45:25

Robbo, su código está utilizando: -webkit-min-device-pixel-ratio:0 que es una declaración inválida. Los dispositivos sin retina tendrán una proporción de píxeles de 1. Probablemente sea por eso que el iPad 3 toma ambas hojas de estilo.

Fuente

2013-01-18 08:26:41 Martin

Problema de consultas de medios CSS con dispositivos iOS

Respuesta

Cuestiones relacionadas