web-dev-qa-db-fra.com

Requêtes multimédia iPhone XR / XS / XS Max CSS

Quelles sont les requêtes de médias CSS correctes utilisées pour cibler les périphériques 2018 d'Apple: iPhone XR/XS/XS Max?

cssiphonemedia-queries
22
nathan

iPhone XR

/* 1792x828px at 326ppi */
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 2) { }

iPhone XS

/* 2436x1125px at 458ppi */
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { }

iPhone XS Max

/* 2688x1242px at 458ppi */
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 3) { }


Vous recherchez une orientation spécifique?

Portrait

Ajoutez la règle suivante:

    and (orientation : portrait)

Paysage

Ajoutez la règle suivante:

    and (orientation : landscape)



Références:

43
nathan

Ce qui précède est correct, mais les concepteurs doivent cibler les véritables dimensions de l'écran pour éviter toute mise à l'échelle, tout recadrage, etc. Par exemple, la taille d'écran en mode paysage par défaut est de 808px pour un XR.

Cela peut donc être plus approprié: @media (largeur maximale: 808px) {...
Ceci remplacera en fait cette requête: @media (largeur maximale: 896px) {...

Le problème vient des zones de sécurité des pommes. Ceux-ci peuvent être surmontés et obtenir une largeur réelle de 896px d'un bord à l'autre en ajoutant ce qui suit:

Balise Meta: viewport-fit = cover CSS: body {padding: env (safe-area-inset, 0px); }

Le remplissage de taille 0px peut être modifié, ou bien des variables en haut à gauche, en haut à droite, ou être adapté en mode portrait/paysage. Mais la plupart auront déjà suffisamment de rembourrage dans leur conception.

Référence: https://webkit.org/blog/7929/designing-websites-for-iphone-x/

Non testé sur d'autres appareils, mais il semble qu'ils adoptent tous la même chose.

2
darren

L'information de Nathan est géniale. Merci pour les points d'arrêt que chaque inspecteur de navigateur ne semble pas avoir. Le seul défi que j’ai rencontré est que toutes mes requêtes précédentes sur les médias utilisent des éléments tels que:

/* Landscape */
@media only screen 
    and (min-device-width : 414px) 
    and (max-device-height : 896px) 
    and (-webkit-device-pixel-ratio : 3)
    and (orientation : landscape) {

alors que la solution ci-dessus utilise seulement

and (device-width : 414px)

ce qui peut causer des problèmes avec les requêtes que vous avez peut-être déjà et qui utilisent à la fois min-device et max-device.

Merci beaucoup pour ces tailles et les DPR!

0
Dick Kirkland