Comment cibler CSS pour iPad mais exclure Safari 4 desktop en utilisant une requête média?

Question

J'essaie d'utiliser une règle de support pour cibler CSS sur iPad uniquement. Je veux exclure iPhone/iPod et les navigateurs de bureau. Je voudrais également exclure d'autres appareils mobiles si possible.

Je l'ai utilisé

<style type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)"> 

mais juste découvert que bureau Safari 4 le lit. J'ai essayé avec des variations « 481px » au lieu de « 768px » et un autre qui ajoute une orientation que:

<style type="text/css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)"> 

mais pas de chance. (Plus tard nous reniflerons des chaînes d'user-agent pour iPad, mais pour l'instant cette solution ne fonctionnera pas.)

Merci!

Mise à jour: il semble que Safari de bureau utilise la largeur et la hauteur de l'écran pour le moment et se donne une orientation de portrait ou de paysage sur cette base. Il ne semble pas que les largeurs et les hauteurs excluent les navigateurs de bureau (à moins que je ne manque quelque chose).

http://mislav.uniqpath.com/2010/04/targeted-css/

Answer 1

media="only screen and (device-width: 768px)" 

Merci à Mislav Marohnic pour la réponse!

Cela fonctionne pour l'iPad dans les deux sens et semble exclure Safari de bureau.

Lorsque je testais (min-device-width: 768px) and (max-device-width: 1024px) Je pouvais voir Safari 4 en utilisant les styles ou en les ignorant comme j'ai élargi ou rétréci la fenêtre. Lors du test (device-width: 768px) j'ai essayé de faire le navigateur Safari de bureau exactement 786px de large, mais je ne l'ai jamais eu pour voir les styles.

Answer 2

Ceci est une démonstration assez simlifying: http://css-tricks.com/snippets/css/ipad-specific-css/

Answer 3

utiliser PHP pour le faire. J'isole la plateforme de la chaîne USER_AGENT. Ensuite, je dois seulement utiliser un if($plateform == 'iPad') {.....} C'est aussi simple que ça!