queries - ¿Cómo apuntar a CSS para iPad pero excluir el escritorio de Safari 4 usando una consulta de medios?
query iphone (3)
Esta es una demostración bastante simlificante: http://css-tricks.com/snippets/css/ipad-specific-css/
Estoy tratando de usar una regla de medios para dirigir CSS a iPad solamente. Quiero excluir iPhone / iPod y navegadores de escritorio. Me gustaría también excluir otros dispositivos móviles si es posible.
He usado
<style type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)">
pero descubrí que el escritorio Safari 4 lo lee. Probé variaciones con "481px" en lugar de "768px" y otra que agrega una orientación a eso:
<style type="text/css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
pero sin suerte. (Más adelante estaremos olfateando las cadenas de usuario-agente para iPad, pero por ahora esa solución no funcionará).
¡Gracias!
Actualización: parece que Safari de escritorio usa el ancho y el alto de la pantalla en este momento y se da una orientación de retrato u paisaje según eso. No parece que los anchos y las alturas excluyan los navegadores de escritorio (a menos que me falta algo).
Yo uso PHP para hacer eso. Aíslo la forma de placa de la cadena USER_AGENT. Entonces solo tengo que usar un if($plateform == ''iPad'') {.....} Es así de fácil!
media="only screen and (device-width: 768px)"
¡Gracias a Mislav Marohnić por la respuesta!
Esto funciona para iPad en cualquier orientación y parece excluir Safari de escritorio.
Cuando estaba probando (min-device-width: 768px) and (max-device-width: 1024px) pude ver Safari 4 usando los estilos o ignorándolos a medida que ampliaba o estrechaba la ventana. Al probar (device-width: 768px) intenté que el navegador Safari de escritorio tuviera exactamente 786 px de ancho, pero nunca pude ver los estilos.