Détecter iPhone/iPad purement par css

J'ai essayé de détecter un iPhone ou un iPad purement par la feuille de style. J'ai essayé la solution fournie ici en utilisant @media handheld, seul écran et (max-device-width: 480px) {.

Toutefois, cela ne semble pas fonctionner. Des idées?

InformationsquelleAutor FLX | 2010-10-01
  1. 24

    C'est la façon dont je gère l'iPhone (et autres périphériques) [pas d'iPad]:

    Dans mon fichier CSS:

    @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
   /* CSS overrides for mobile here */
}

    Dans la tête de mon document HTML:

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    • Est-il non media-query façon de le faire? Depuis Safari iPad a ce bug-fonctionnalité où il re-tailles les grandes images d'arrière-plan à 50% et ce bug-fonctionnalité n'existe pas sur d'autres petits pixels navigateurs. Donc, on a besoin de quelque chose comme IE conditionnelles pour l'iPad? J'ai donc pu cibler uniquement l'iPad/iPhone safari?
    • N'utilisez pas cet, ne jamais mettre user-scalable=no
    • Je suis d'accord avec bfred.il ici. user-scaleable=no n'est pas une bonne pratique.
    • Je suis en désaccord sur le "jamais" de la partie pour l'utilisateur évolutive. Si vous êtes à la construction d'un natif comme le responsive web app, l'avoir de l'utilisateur évolutive ne peut que causer des problèmes. Si vous l'avez conçu correctement, il ne devrait pas être un besoin pour un utilisateur de zoomer/dézoomer.
    • vous avez raison, c'est un bon cas d'utilisation de cet attribut. Mais c'est clairement incorrect dans le contexte de l'original de la question et la réponse.
    InformationsquelleAutor Bart
  2. 29

    iPhone & iPod touch:

    <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="../iphone.css" type="text/css" />

    iPhone 4 & iPod touch 4G:

    <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />

    iPad:

    <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />
    • L'iPad de détection a un problème: être prêt que les netbooks qui ont généralement des écrans de 1024 x 768 et 1024 x 600 seront touchés par cette CSS aussi.
    • Jamais détecter des périphériques spécifiques. De nouveaux dispositifs de sortir tous les mois et de changement de ces valeurs.
    InformationsquelleAutor Olivier Payen
  3. 14

    Vous pourriez vouloir essayer la solution de ce O'Reilly article.

    La partie importante de ces CSS media queries:

    <link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css"> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css"> 
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">
    • Tandis que ceci peut théoriquement répondre à la question, il serait préférable pour inclure l'essentiel des éléments de réponse ici, et de fournir le lien de référence.
    • le Lézard: Merci pour cette remarque, ont mis à jour la réponse.
    InformationsquelleAutor DarkDust
  4. 14

    - Je utiliser ces:

    /* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {
}

/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}

/* iPhone Portrait */
@media screen and (max-device-width: 480px) and (orientation:portrait) {
} 

/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation:landscape) {
}

/* iPad Portrait */
@media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
}

/* iPad Landscape */
@media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
}

    http://zsprawl.com/iOS/2012/03/css-for-iphone-ipad-and-retina-displays/

    • Ajouté " and (max-device-width: 1024px)" condition pour l'iPad.
    • Qu'advient-il si vous avez un appareil Android qui a une largeur de 460px?
    InformationsquelleAutor zSprawl
  5. 3

    De nombreux appareils avec différentes tailles d'écran/ratios/résolutions viennent même au cours des cinq dernières années, y compris de nouveaux types d'iphone et d'ipad. Il serait très difficile pour personnaliser un site web pour chaque appareil.

    Pendant ce temps, les media queries pour device-width, device-height, et device-aspect-ratio ont été remplacés, de sorte qu'ils ne peuvent pas travailler dans les futures versions du navigateur. (Source: MDN)

    TLDR: Design basé sur le navigateur largeurs, pas les appareils. Voici une bonne introduction à ce sujet.

    • Dispositif de requêtes spécifiques sont nécessaires pour contourner spécifiques à l'appareil de bugs.
    InformationsquelleAutor jkdev