web-dev-qa-db-fra.com

Requête multimédia iPhone 5 CSS

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

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

@media only screen and (max-device-width: 480px) {}
iphonecssresponsive-designmedia-queriesiphone-5
129
Maverick

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

Notez que l'iPhone 5 n'a pas de format d'image 16: 9 . Il 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:
Requêtes de médias @ W3C
Comparaison de modèles d'iPhone
Calculateur de format d'image

275
2C-B

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 que l'iPhone 5 réagit et non à 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 requêtes @media délimitées par des virgules, et elles fonctionnent parfaitement.

Notez que ce qui précède peut toucher d'autres périphériques partageant des ratios similaires, tels que le Galaxy Nexus. Voici une méthode supplémentaire qui ne cible que les périphériques dotés une dimension de 640px (560px en raison d'étranges anomalies de pixels d'affichage) et une autre 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 */
}
63
Eric

Toutes les réponses énumérées ci-dessus, qui utilisent max-device-width ou max-device-height pour les requêtes de médias, souffrent d'un très gros bug: elles ciblent également beaucoup d'autres appareils mobiles populaires (probablement indésirable et jamais testé, ou qui va frapper le marché à l’avenir).

Cette requête fonctionnera pour tout périphérique ayant un écran plus petit, et votre conception sera probablement endommagée.

Combinée à des requêtes multimédia similaires spécifiques à l'appareil (pour HTC, Samsung, iPod, Nexus, etc.), cette pratique lancera une bombe à retardement. Pour débiguer, 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 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 exact largeur et hauteur, et non max-width, est coché ici.

Maintenant, quelle est la solution? Si vous souhaitez rédiger une page Web qui conviendra à tous les appareils possibles, la meilleure pratique consiste à utiliser dégradation

/ * motif de dégradation que nous vérifions seulement la largeur de l’écran, nous allons changer de portrait en 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 de la téléphonie mobile, tournez ce système à l'envers pour proposer une approche mobile d'abord. Utilisez min-device-width dans ce cas. Cela accélérera le rendu des pages Web pour les navigateurs mobiles.

33
Dan

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
eli philosoph

iPhone 5 en 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*/

}
6
Sudheer

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

Comme suit lien , la solution ci-dessous fonctionne.

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

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

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

Vous pouvez obtenir votre réponse assez facilement pour l'iPhone 5 avec d'autres smartphones dans la base de données des fonctionnalités multimédias pour appareils mobiles:

http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html

Vous pouvez même obtenir vos propres valeurs de périphérique sur la page de test du même site Web.

(Avertissement: Ceci est mon site web)

3
pieroxy
/* 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) { 

    }
}
0
Arthur Yakovlev

autant que je sache, l'iPhone n'utilise pas 1,5 pixels

iPhone 3G/3GS: (-webkit-device-pixel-ratio: 1) iPhone 4G/4GS/5G: (-webkit-device-pixel-ratio: 2)

0
noreabu