IP Girl
  1. IP Girl
  3. Requêtes multimédias CSS pour iPhone X / 8/8 Plus
Intereting Posts
En utilisant deux beans implémentant la même interface – comment configurer automatiquement le bean par défaut? Comment supprimer un cookie dans une servlet Java Comment obtenir un ombre de boîte sur les côtés gauche et droit seulement Comment append deux objects NSNumber? Diviser Int en Int et retourner Int Afficher un typemap MPI Erreur d’parsing d’erreur Haskell sur l’entrée “=” Comment crasher un JVM? Est-ce que .asSet (…) existe dans n’importe quelle API? Est-il possible aux jscs d’ignorer les règles par fichier, par bloc ou par ligne? Convertir une chaîne en type entier dans Go? Newline dans JLabel Git fatal: La référence a un format invalide: ‘refs / heads / master Comment évaluer une variable booléenne dans un bloc if en bash? Configurer Gradle pour api 26 (Android)

Requêtes multimédias CSS pour iPhone X / 8/8 Plus

Quelles sont les requêtes médias CSS correspondant aux nouveaux appareils Apple? Je dois définir la background-color de background-color du body pour changer la couleur de fond de la zone de sécurité du X.

iPhone X 

 @media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) { }

iPhone 8 

 @media only screen and (device-width : 375px) and (device-height : 667px) and (-webkit-device-pixel-ratio : 2) { }

iPhone 8 Plus 

 @media only screen and (device-width : 414px) and (device-height : 736px) and (-webkit-device-pixel-ratio : 3) { }

iPhone 6 + / 6s + / 7 + / 8 + partagent les mêmes tailles, tandis que l’iPhone 7/8 le fait également.

Vous recherchez une orientation spécifique?

Portrait

Ajoutez la règle suivante: 

  and (orientation : portrait)

Paysage

Ajoutez la règle suivante: 

  and (orientation : landscape)

Les références:

Voici quelques-unes des requêtes médiatiques suivantes pour les iphones. Lien de référence https://mydevice.io/devices/ 

 /* iphone 3 */ @media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 1) { } /* iphone 4 */ @media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 2) { } /* iphone 5 */ @media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) { } /* iphone 6, 6s, 7, 8 */ @media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { } /* iphone 6+, 6s+, 7+, 8+ */ @media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) { } /* iphone X */ @media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) { }