Ya he leído casi todas las preguntas de stackoverflow relacionadas con este problema, pero nada funciona como esperaba.Una consulta de medios confiable para detectar solo iPad (o en el mejor de 1024x768 dispositivos móviles)
Se preguntó a mí para detectar sólo el dispositivo iPad (o, en el mejor ~ 1024x768 móvil dispositivo) con una consulta de medios. He intentado utilizar
@media screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
...
}
pero esta consulta medio de impresión satisfaga también Chrome (y Safari, supongo) en los ordenadores portátiles y de escritorio Win32/MacOS cuando la resolución está ajustada a 1024x768 (pero no en Firefox). Intenté esta consulta de medios definiendo orientation:portrait y orientation:landscape pero sin suerte. También se reconoce en el navegador webkit de escritorio.
Puede probar this fiddle para probar el problema.
Después de buscar vine a this interesting article en que aparece
Creo Safari (y los otros navegadores WebKit que he probado en) no están siguiendo la especificación, mientras que Firefox y Opera son.
La función de medios de 'ancho' describe el ancho del área de visualización de destino del dispositivo de salida. Para medios continuos, este es el ancho de la ventana gráfica (como se describe en CSS2, sección 9.1.1 [CSS21]), incluido el tamaño de una barra de desplazamiento representada (si existe).
así que probamos este (fiddle) con 1009px como max-device-width (1024-15)
@media screen and (min-device-width: 768px)
and (max-device-width: 1009px) {
...
}
y no funciona
pero si uso esta consulta medios de comunicación también definir la orientación (fiddle)
@media screen and (device-width:768px) and (orientation:portrait),
screen and (device-width:1009px) and (orientation:landscape) {
...
}
sorprendente (para mí) que parece funcionar correctamente y parece coincidir solo con safari/iPad.
Q: ¿esta consulta de medios es lo suficientemente confiable para mi necesidad? ¿Funciona siempre en iPad/iPad2? ¿O debo esperar algunos casos extremos y una coincidencia inesperada con alguna otra resolución de dispositivo? En tal caso, ¿puede sugerir una consulta de medios más eficiente y confiable?
que :) Gracias (y perdón por el nivel de detalle)
¿Cuál es el objetivo exacto? P.ej. habrá un iPad 3 el próximo mes más o menos, con una resolución de pantalla diferente. Y sí, espero que otras tabletas coincidan también. – Lennart
El propósito exacto es principalmente combinar ipad/ipad2. Sé que esto no tiene mucho sentido en términos de RWD (¿cuál es la diferencia entre un móvil y un escritorio de 1024x768? Deberían considerarse lo mismo en mi humilde opinión) pero como me pidieron que lo haga en puro CSS, me gustaría lograr esto, si es posible, por supuesto. – fcalderan
¿Está tratando de hacer un sitio amigable para iPad? Si ese es el caso, sería mejor hacer que el sitio 'toque' amigable para todos los dispositivos y en ese caso puede usar bibliotecas como modernizr para olfatear si el dispositivo admite eventos táctiles (para que pueda cambiar qué archivo css se procesa en javascript) – Skuld