Requêtes multimédia sur iPhone X / 8/8 Plus CSS

Question

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

Answer 1

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+/6+/7+/8+ partager la même taille, alors que l'iPhone 7/8 également faire.

---

La recherche d'une orientation spécifique ?

Portrait

Ajouter la règle suivante:

    and (orientation : portrait) 

Paysage

Ajouter la règle suivante:

    and (orientation : landscape) 

Références:

• https://webkit.org/blog/7929/designing-websites-for-iphone-x/
• https://developer.apple.com/ios/human-interface-guidelines/visual-design/adaptivity-and-layout/
• https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
• https://mydevice.io/devices/
• http://viewportsizes.com/mine/

Answer 2

Voici certaines des requêtes multimédia suivantes pour les iphones. Voici le lien de référence https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

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

    /* iphone XR */
    @media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 2) { }

   /* iphone XS */
    @media only screen and (min-device-width : 375px) and (max-device-height : 812px) and (-webkit-device-pixel-ratio : 3) { }

   /* iphone XS Max */
    @media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 3) { }
 

Answer 3

J'ai remarqué que les réponses sont ici à l'aide de: device-width, device-height, min-device-width, min-device-height, max-device-width, max-device-height.

Veuillez ne pas les utiliser car ils sont obsolètes. voir le MDN pour référence. Au lieu de cela l'utilisation de l' min-width, max-width et ainsi de suite. L'assurance supplémentaire, vous pouvez définir le min et le max de la même px montant. Par exemple:

iPhone X

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

Vous pouvez également remarquer que je suis en utilisant 635px pour la hauteur. Essayez-le vous-même la hauteur de la fenêtre est en fait 635px. exécuter le simulateur iOS pour iPhone X et de l'inspecteur Web de Safari n' window.innerHeight. Voici quelques liens utiles à ce sujet:

• https://medium.com/@hacknicity/how-ios-apps-adapt-to-the-iphone-x-screen-size-a00bd109bbb9
• https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
• https://ivomynttinen.com/blog/ios-design-guidelines
• https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

Answer 4

Il semble que la méthode la plus précise (et transparente) d’ajouter le rembourrage pour iPhone X / 8 en utilisant env () ...

 padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
 

Voici un lien décrivant ceci:

https://css-tricks.com/the-notch-and-css/