Comment cibler les CSS pour l'iPad, mais exclure Safari 4 bureau à l'aide d'une requête de média?
Je suis en train d'utiliser un support de règle pour cible CSS pour iPad seulement. Je veux exclure iPhone/iPod et les navigateurs de bureau. Je voudrais également exclure les autres appareils mobiles, si possible.
J'ai utilisé
<style type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)">
mais viens de découvrir que bureau Safari 4 lit. J'ai essayé de variations avec "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 allons être en reniflant les chaînes user-agent pour l'iPad, mais pour l'instant, cette solution ne fonctionnera pas.)
Merci!
Mise à jour: il semble que le bureau Safari utilise la largeur et la hauteur de l'écran à l'instant et se donne une orientation portrait ou paysage sur cette base. Il n'a pas l'air comme si les largeurs et hauteurs permet d'écarter les navigateurs de bureau (sauf que je suis absent quelque chose).
http://mislav.uniqpath.com/2010/04/targeted-css/
- Cet article peut aider: sitepoint.com/blogs/2010/04/20/...
Vous devez vous connecter pour publier un commentaire.
Grâce à Mislav Marohnić pour la réponse!
Cela fonctionne pour iPad dans l'un des sens et semble exclure de bureau Safari.
Quand j'ai été le tester
(min-device-width: 768px) and (max-device-width: 1024px)
J'ai pu voir Safari 4 en utilisant les styles ou les ignorer comme je l'ai élargie ou rétrécie la fenêtre.
Lors de l'essai de
(device-width: 768px)
j'ai essayé de faire le bureau du navigateur Safari exactement 786px large, mais je n'ai jamais réussi à voir les styles.J'utilise le PHP pour le faire. J'ai isoler la plate-forme de l'USER_AGENT chaîne. Alors je n'ai qu'à utiliser un
if($plateform == 'iPad') {.....}
C'est facile!
C'est assez simlifying de démonstration:
http://css-tricks.com/snippets/css/ipad-specific-css/