queries - Consulta de medios CSS para apuntar solo al iPad y al iPad
query iphone (5)
Hola, estoy trabajando con múltiples dispositivos de tableta, iPad, Galaxy Tab, Acer Iconia, LG 3D Pad, etc.
- iPad - 1024 x 768
- Almohadilla LG - 1280 x 768
- Galaxy Tab - 1280 x 800
Quiero apuntarme al iPad solo con la consulta de medios de CSS3. Dado que el ancho del dispositivo de LG y iPad es el mismo 768px, tengo problemas para separar cada dispositivo.
He intentado seguir para separarme, pero parece que no funciona:
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) /* applied to lg also */
@media only screen and (min-resolution: 132dpi) and (max-device-width: 1024px) and (orientation : portrait) /* applies to lg also */
@media only screen and (device-aspect-ratio: 1024/768) and (orientation : portrait) /* does not work on iPad or LG */
No conozco las opciones -webkit-device-pixel-ratio y otras -webkit * y sus valores para destino para iPad. No quiero usar JavaScript para estilos, ¿alguna idea?
Bueno, la misma pregunta y también hay una respuesta =)
http://css-tricks.com/forums/discussion/12708/target-ipad-ipad-only./p1
@media only screen and (device-width: 768px) ...
@media only screen and (max-device-width: 1024px) ...
No puedo probarlo actualmente así que por favor pruébalo =)
También encontré algo más:
http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/
O puede consultar el navegador con algunos javascript y generar / agregar un archivo css con javascript
Debe dirigirse al dispositivo por su agente de usuario, utilizando alguna secuencia de comandos. El agente de usuario para el iPad es:
Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10
Estoy un poco tarde para responder esto, pero ninguno de los anteriores funcionó para mí.
Esto es lo que funcionó para mí
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
//your styles here
}
Finalmente encontré una solución de: Detectar diferentes plataformas de dispositivos usando CSS
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />
Para reducir llamadas HTTP, esto también se puede usar dentro de su archivo CSS común existente:
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
.ipad-portrait { color: red; } /* your css rules for ipad portrait */
}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
.ipad-landscape { color: blue; } /* your css rules for ipad landscape */
}
Espero que esto ayude.
Otras referencias:
<html>
<head>
<title>orientation and device detection in css3</title>
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="iphone-portrait.css" />
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="iphone-landscape.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />
<link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 1184px) and (orientation:portrait)" href="htcdesire-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 390px) and (orientation:landscape)" href="htcdesire-landscape.css" />
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="desktop.css" />
</head>
<body>
<div id="iphonelandscape">iphone landscape</div>
<div id="iphoneportrait">iphone portrait</div>
<div id="ipadlandscape">ipad landscape</div>
<div id="ipadportrait">ipad portrait</div>
<div id="htcdesirelandscape">htc desire landscape</div>
<div id="htcdesireportrait">htc desire portrait</div>
<div id="desktop">desktop</div>
<script type="text/javascript">
function res() { document.write(screen.width + '', '' + screen.height); }
res();
</script>
</body>
</html>