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/

InformationsquelleAutor Miriam Salzer | 2010-04-20
  1. 42
     media="only screen and (device-width: 768px)"

    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.

    • C'est un très astuce. N'oubliez pas d'accepter une réponse. (Pouvez-vous accepter votre propre?)
    • J'ai trouvé un cas où le css est ignoré lorsque la page est à l'intérieur d'une application webview. Ce pourrait être un cas limite ou pas, je ne sais pas. La webview avait codé en dur taille et était en train de donner le useragent de l'iPhone, même si c'était un iPad.
    InformationsquelleAutor Miriam Salzer
  2. 4

    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!

    • Peut être utile de publier tous de votre code.
    • Je suis d'accord, de vérifier si l'agent de navigateur contient un "ipad" sur le côté serveur, puis y compris la feuille de style spécifiée est le moyen le plus précis pour cibler un iPad. La solution marqué comme réponse affectera tous les appareils.
    InformationsquelleAutor Maze
  3. 2

    C'est assez simlifying de démonstration:
    http://css-tricks.com/snippets/css/ipad-specific-css/

    • Et ici vous pouvez trouver d'Apple Safari Bibliothèque de Référence pour l'HTML Meta-Tags: lien
    InformationsquelleAutor Katzenfresser