Requête multimédia CSS iPhone 5


132

L'iPhone 5 a un écran plus long et il ne capte pas la vue mobile de mon site Web. Quelles sont les nouvelles requêtes de conception réactive pour l'iPhone 5 et puis-je les combiner avec les requêtes iPhone existantes?

Ma requête média actuelle est la suivante:

@media only screen and (max-device-width: 480px) {}

3
Pouvons-nous voir vos requêtes multimédias existantes?
BoltClock

Réponses:


283

Une autre fonctionnalité multimédia utile est device-aspect-ratio.

Notez que l' iPhone 5 n'a pas de rapport hauteur / largeur 16: 9 . C'est en fait 40:71.

iPhone <5:
@media screen and (device-aspect-ratio: 2/3) {}

iPhone 5:
@media screen and (device-aspect-ratio: 40/71) {}

iphone 6:
@media screen and (device-aspect-ratio: 375/667) {}

iPhone 6 Plus:
@media screen and (device-aspect-ratio: 16/9) {}

iPad:
@media screen and (device-aspect-ratio: 3/4) {}

Référence:
Media Queries @ W3C
iPhone Model Comparison
Aspect Ratio Calculator


2
J'aime cette approche mais je n'ai pas pu la faire fonctionner dans une vue Web de l'application PhoneGap avant d'ajouter -webkit-min-device-pixel-ratio comme expliqué par Stephen Sprawl zsprawl.com/iOS/2012/09/css-media-queries-for -le-iphone-5 . @media screen and (device-aspect-ratio: 40/71) and (-webkit-min-device-pixel-ratio: 2) {// iphone5 for teh phonegaps}
TaeKwonJoe

J'ai dû ajouter and (-webkit-min-device-pixel-ratio: 2)une requête multimédia sur l'iPhone 5 pour le faire fonctionner dans la vue Web PhoneGap, comme indiqué par @TaeKwonJoe
Mahendra Liya

1
Merci d'avoir mis à jour ceci pour inclure l'iPhone 6!
Maverick

Cela fonctionne plutôt bien lorsque j'ai besoin de différencier l'iphone 4 et l'iphone 5 en css.
euccas

1
Pour l'iphone 6, (rapport d'aspect de l'appareil: 667/375) ne fonctionnait pas sur un vrai iphone physique 6. Cela fonctionnait cependant sur le simulateur iOS. Je l'ai changé en 375/667 et cela a fonctionné sur l'appareil physique.
faire quoi maintenant

64

Il y a ceci, que je crédite à ce blog :

@media only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone 5 only */
}

Gardez à l'esprit qu'il réagit à l'iPhone 5, pas à la version iOS particulière installée sur ledit appareil.

Pour fusionner avec votre version existante, vous devriez pouvoir les délimiter par des virgules:

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone only */
}

NB: Je n'ai pas testé le code ci-dessus, mais j'ai déjà testé des @mediarequêtes séparées par des virgules et elles fonctionnent très bien.

Notez que ce qui précède peut toucher certains autres appareils qui partagent des ratios similaires, tels que le Galaxy Nexus. Voici une méthode supplémentaire qui ciblera uniquement les appareils qui ont une dimension de 640px (560px en raison de certaines anomalies étranges de pixels d'affichage) et l'une d'entre 960px (iPhone <5) et 1136px (iPhone 5).

@media
    only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (max-device-height: 640px) and (min-device-height: 560px),
    only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (max-device-width: 640px) and (min-device-width: 560px) {
    /* iPhone only */
}

1
Pouvez-vous suggérer comment je pourrais combiner cette requête avec mon ancienne pour attraper à la fois iPhone 4 et 5?
Maverick

6
Attention, cela affectera également d'autres téléphones - pas seulement les iPhone. Un exemple étant le Samsung Galaxy Nexus.
Mike Sweeney

@MikeSweeney Bon appel. J'ai mis à jour mon message avec une nouvelle méthode qui ne devrait pas inclure d'autres appareils.
Eric

@Eric C'est à peu près ce sur quoi j'ai fini par m'installer après un tas de tests inter-téléphones - j'ai dû mettre de la hauteur dans le mix! Semble fonctionner très bien sur les différents téléphones 7-8 sur lesquels je teste.
Mike Sweeney

cette ligne est-elle correcte iPhone 5 and not to iOS 6:? Doit-il être: "iPhone5 et non vers iPhone 6"?
Sgnl

38

Toutes ces réponses listées ci-dessus, qui utilisent max-device-widthou max-device-heightpour les requêtes média, souffrent d'un bug très fort: elles ciblent également beaucoup d'autres appareils mobiles populaires (probablement indésirables et jamais testés, ou qui arriveront sur le marché à l'avenir).

Ces requêtes fonctionneront pour tout appareil doté d'un écran plus petit et votre conception sera probablement endommagée.

Combinée à des requêtes multimédias similaires spécifiques aux appareils (pour HTC, Samsung, IPod, Nexus ...), cette pratique lancera une bombe à retardement. Pour le débogage, cette idée peut faire de votre CSS un spagetti incontrôlé. Vous ne pouvez jamais tester tous les appareils possibles.

Veuillez noter que la seule requête multimédia ciblant toujours l'iPhone5 et rien d'autre , est:

/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
                 /*IPhone 5 only CSS here*/
}

Notez que la largeur et la hauteur exactes, et non la largeur maximale, sont vérifiées ici.


Maintenant, quelle est la solution? Si vous souhaitez écrire une page Web qui aura fière allure sur tous les appareils possibles, la meilleure pratique consiste à utiliser la dégradation

/ * motif de dégradation, nous vérifions la largeur de l'écran uniquement, cela changera en passant du portrait au paysage * /

/*css for desktops here*/

@media (max-device-width: 1024px) {
  /*IPad portrait AND netbooks, AND anything with smaller screen*/
  /*make the design flexible if possible */
  /*Structure your code thinking about all devices that go below*/
}
@media (max-device-width: 640px) {
 /*Iphone portrait and smaller*/
}
@media (max-device-width: 540px) {
 /*Smaller and smaller...*/
}
@media (max-device-width: 320px) {
 /*IPhone portrait and smaller. You can probably stop on 320px*/
}

Si plus de 30% des visiteurs de votre site Web proviennent d'un mobile, inversez ce schéma, en proposant une approche axée sur le mobile. Utilisez min-device-widthdans ce cas. Cela accélérera le rendu des pages Web pour les navigateurs mobiles.


10
Je préférerais l'amélioration progressive et le mobile d'abord. Cela commence avec le mobile et se construit en utilisant min-device-width.
primavera133

2
Notez également que la solution hauteur / largeur / rapport de pixels qui correspond uniquement à l'iPhone 5 correspondra également au prochain téléphone qui semble avoir les mêmes caractéristiques. Le thème général de votre réponse est correct: penser en termes d' appareils spécifiques n'est pas la bonne façon de procéder.
Pointy

@Dan - même si votre réponse ne répond pas directement à la question, elle l'examine dans une perspective plus large des meilleures pratiques pour une conception réactive. Les choses que vous avez écrites ici, à mon avis, sont très profondes et pratiques. Cinq étoiles.
Dimitri Vorontzov

@Dan - en essayant de mettre en œuvre votre suggestion, quelque chose ne fonctionne pas. Puis-je s'il vous plaît vous demander de jeter un coup d'œil: stackoverflow.com/questions/16486078/…
Dimitri Vorontzov

@primavera, dites pourquoi. Quel est l'avantage d'une approche mobile first?
S ..

7

pour moi, la requête qui a fait le travail était:

only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)

7

iPhone 5 en mode portrait et paysage

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {

/* styles*/
}

iPhone 5 en paysage

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 
/* styles*/

}

iPhone 5 en portrait

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 
 /* styles*/

}

Pourquoi avez-vous besoin max-device-width : 568pxd'un portrait?
adi518

1
@ adi518 si vous n'utilisez pas max-width, les règles css sont appliquées pour tout appareil supérieur à 320px, ce qui est littéralement comme la plupart des appareils - ordinateurs de bureau tablettes, etc.
Sudheer

1
Pourquoi ne pas utiliser à la device-width: 320px and device-height: 568pxplace?
adi518

5

Aucune des réponses ne fonctionne pour moi en ciblant une application phonegapp.

Comme le lien suivant pointe, la solution ci-dessous fonctionne.

@media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    // css here
}

5

Juste un ajout très rapide car j'ai testé quelques options et j'ai manqué cela en cours de route. Assurez-vous que votre page contient:

<meta name="viewport" content="initial-scale=1.0">


0

afaik no iPhone utilise un rapport de pixels de 1,5

iPhone 3G / 3GS: (-Rapport de pixels de l'appareil Web: 1) iPhone 4G / 4GS / 5G: (-Rapport de pixels de l'appareil-Web: 2)


0
/* iPad */
@media screen and (min-device-width: 768px) {
    /* ipad-portrait */
    @media screen and (max-width: 896px) { 
        .logo{
            display: none !important;
        }
    }
    /* ipad-landscape */
    @media screen and (min-width: 897px) { 

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

    }
    /* iphone-landscape */
    @media screen and (min-width: 401px) { 

    }
}

-3

Vous devriez peut-être réduire le "-webkit-min-device-pixel-ratio" à 1,5 pour attraper tous les iPhones?

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 1.5) {
/* iPhone only */
}

1
Quel iPhone utilise un ratio de pixels de l'appareil de 1,5?
BoltClock

1
Je recommande vivement de faire des requêtes multimédias en fonction de la largeur de l'appareil et non du nom de l'appareil (iPhone). Donc, si l'iPhone 5 a plus de largeur, rendez-le utilisable.
Tom Roggero
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.