Consulta de medios CSS para apuntar solo al iPad y al iPad

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?

Finalmente encontré una solución de: Detectar diferentes plataformas de dispositivos usando 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:

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 } 

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 
   orientation and device detection in css3          
iphone landscape
iphone portrait
ipad landscape
ipad portrait
htc desire landscape
htc desire portrait
desktop