Requête multimédia sur l’iPhone 5 CSS

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

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

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

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

Notez que l’ iPhone 5 n’a pas un format d’image 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:
Requêtes multimédia @ W3C
Comparaison des modèles iPhone
Calculateur de rapport hauteur / largeur

Il y a ceci, que je mérite sur 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 ce périphérique.

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

 @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é les requêtes @media délimitées par des @media , et elles fonctionnent @media .

Notez que ce qui précède peut toucher d’autres appareils qui partagent des ratios similaires, tels que le Galaxy Nexus. Voici une méthode supplémentaire qui ne ciblera que les périphériques ayant une dimension de 640px (560px en raison de certaines anomalies d’affichage de pixels d’affichage) et un 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 */ } 

Toutes ces réponses énumérées ci-dessus, qui utilisent max-device-width ou max-device-height pour les requêtes multimédias, ont un très fort bogue: elles ciblent également de nombreux autres appareils mobiles populaires (probablement indésirables et jamais testés ou qui vont bash). le marché à l’avenir).

Ces requêtes fonctionneront pour tout périphérique disposant d’un écran plus petit et votre design sera probablement cassé.

Combiné à des requêtes multimédias spécifiques à un périphérique (pour HTC, Samsung, IPod, Nexus …), cette pratique va lancer 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 périphériques possibles.

Sachez que la seule requête média ciblant toujours IPhone5 et rien d’autre est la suivante:

 /* 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 voulez écrire une page Web qui aura l’air bien sur tous les périphériques possibles, la meilleure pratique est d’utiliser la dégradation

/ * modèle de dégradation que nous vérifions seulement la largeur de l’écran, cela changera 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 de téléphones portables, renversez ce système, en proposant 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.

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) 

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*/ } 

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

Comme les points de lien suivants, la solution ci-dessous fonctionne.

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

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 a:

  

Vous pouvez obtenir votre réponse assez facilement pour l’iPhone5 avec d’autres smartphones sur la firebase database de fonctionnalités multimédia pour les 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 d’appareil sur la page de test sur le même site Web.

(Disclaimer: Ceci est mon site)

afaik aucun iPhone utilise un pixel-ratio de 1,5

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

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

Vous devriez peut-être descendre 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 */ }