Apple

Requêtes de support pour les périphériques standard

Par Maximus63 , le 31 mai 2019 - 10 minutes de lecture

Si vous pensez que responsive est simple, je me sens mal pour votre fils. Nous avons 99 fenêtres d'affichage, mais l'iPhone n'en est qu'un.
—Josh Brewer, 10 mars 2010

Un élément majeur de la conception réactive est la création de la bonne expérience pour le bon périphérique. Avec un nombre de milliards d'appareils différents sur le marché, cela peut être une tâche ardue. Nous avons regroupé les requêtes de supports pouvant être utilisées pour cibler les conceptions de nombreux périphériques standard et populaires qu’il vaut certainement la peine de lire.

Si vous recherchez une liste complète de requêtes de média, ce référentiel est une bonne ressource.

Si vous réagissez à ceci: vous ne devriez jamais baser vos points d'arrêt sur des périphériques! Vous avez un bon point. Justin Avery a un post intéressant sur les pièges possibles de l’utilisation de points de rupture spécifiques à un appareil. Choisir des points d'arrêt en fonction de votre conception et non de périphériques spécifiques est une bonne façon de procéder. Mais parfois, vous avez juste besoin d’un peu d’aide pour maîtriser une situation en particulier.

Téléphones et ordinateurs de poche

iPhones

/ * ----------- iPhone 4 et 4S ----------- * /

/ * Portrait et paysage * /
Écran @média seulement
  et (min-device-width: 320px)
  et (max-device-width: 480px)
  et (-webkit-min-device-pixel-ratio: 2) {

}

/ * Portrait * /
Écran @média seulement
  et (min-device-width: 320px)
  et (max-device-width: 480px)
  et (-webkit-min-device-pixel-ratio: 2)
  et (orientation: portrait) {
}

/ * Paysage * /
Écran @média seulement
  et (min-device-width: 320px)
  et (max-device-width: 480px)
  et (-webkit-min-device-pixel-ratio: 2)
  et (orientation: paysage) {

}

/ * ----------- iPhone 5, 5S, 5C et 5SE ----------- * /

/ * Portrait et paysage * /
Écran @média seulement
  et (min-device-width: 320px)
  et (max-device-width: 568px)
  et (-webkit-min-device-pixel-ratio: 2) {

}

/ * Portrait * /
Écran @média seulement
  et (min-device-width: 320px)
  et (max-device-width: 568px)
  et (-webkit-min-device-pixel-ratio: 2)
  et (orientation: portrait) {
}

/ * Paysage * /
Écran @média seulement
  et (min-device-width: 320px)
  et (max-device-width: 568px)
  et (-webkit-min-device-pixel-ratio: 2)
  et (orientation: paysage) {

}

/ * ----------- iPhone 6, 6S, 7 et 8 ----------- * /

/ * Portrait et paysage * /
Écran @média seulement
  et (min-device-width: 375px)
  et (max-device-width: 667px)
  et (-webkit-min-device-pixel-ratio: 2) {

}

/ * Portrait * /
Écran @média seulement
  et (min-device-width: 375px)
  et (max-device-width: 667px)
  et (-webkit-min-device-pixel-ratio: 2)
  et (orientation: portrait) {

}

/ * Paysage * /
Écran @média seulement
  et (min-device-width: 375px)
  et (max-device-width: 667px)
  et (-webkit-min-device-pixel-ratio: 2)
  et (orientation: paysage) {

}

/ * ----------- iPhone 6+, 7+ et 8+ ----------- * /

/ * Portrait et paysage * /
Écran @média seulement
  et (min-device-width: 414px)
  et (max-device-width: 736px)
  et (-webkit-min-device-pixel-ratio: 3) {

}

/ * Portrait * /
Écran @média seulement
  et (min-device-width: 414px)
  et (max-device-width: 736px)
  et (-webkit-min-device-pixel-ratio: 3)
  et (orientation: portrait) {

}

/ * Paysage * /
Écran @média seulement
  et (min-device-width: 414px)
  et (max-device-width: 736px)
  et (-webkit-min-device-pixel-ratio: 3)
  et (orientation: paysage) {

}

/ * ----------- iPhone X ----------- * /

/ * Portrait et paysage * /
Écran @média seulement
  et (min-device-width: 375px)
  et (max-device-width: 812px)
  et (-webkit-min-device-pixel-ratio: 3) {

}

/ * Portrait * /
Écran @média seulement
  et (min-device-width: 375px)
  et (max-device-width: 812px)
  et (-webkit-min-device-pixel-ratio: 3)
  et (orientation: portrait) {

}

/ * Paysage * /
Écran @média seulement
  et (min-device-width: 375px)
  et (max-device-width: 812px)
  et (-webkit-min-device-pixel-ratio: 3)
  et (orientation: paysage) {

}

Téléphones Galaxy

/ * ----------- Galaxy S3 ----------- * /

/ * Portrait et paysage * /
@ media screen
  et (largeur du périphérique: 360px)
  et (hauteur de l'appareil: 640px)
  et (-webkit-device-pixel-ratio: 2) {

}

/ * Portrait * /
@ media screen
  et (largeur de périphérique: 320px)
  et (hauteur de l'appareil: 640px)
  et (-webkit-device-pixel-ratio: 2)
  et (orientation: portrait) {

}

/ * Paysage * /
@ media screen
  et (largeur de périphérique: 320px)
  et (hauteur de l'appareil: 640px)
  et (-webkit-device-pixel-ratio: 2)
  et (orientation: paysage) {

}

/ * ----------- Galaxy S4, S5 et Note 3 ----------- * /

/ * Portrait et paysage * /
@ media screen
  et (largeur de périphérique: 320px)
  et (hauteur de l'appareil: 640px)
  et (-webkit-device-pixel-ratio: 3) {

}

/ * Portrait * /
@ media screen
  et (largeur de périphérique: 320px)
  et (hauteur de l'appareil: 640px)
  et (-webkit-device-pixel-ratio: 3)
  et (orientation: portrait) {

}

/ * Paysage * /
@ media screen
  et (largeur de périphérique: 320px)
  et (hauteur de l'appareil: 640px)
  et (-webkit-device-pixel-ratio: 3)
  et (orientation: paysage) {

}

/ * ----------- Galaxy S6 ----------- * /

/ * Portrait et paysage * /
@ media screen
  et (largeur du périphérique: 360px)
  et (hauteur de l'appareil: 640px)
  et (-webkit-device-pixel-ratio: 4) {

}

/ * Portrait * /
@ media screen
  et (largeur du périphérique: 360px)
  et (hauteur de l'appareil: 640px)
  et (-webkit-device-pixel-ratio: 4)
  et (orientation: portrait) {

}

/ * Paysage * /
@ media screen
  et (largeur du périphérique: 360px)
  et (hauteur de l'appareil: 640px)
  et (-webkit-device-pixel-ratio: 4)
  et (orientation: paysage) {

}

Google Pixel

/ * ----------- Google Pixel ----------- * /

/ * Portrait et paysage * /
@ media screen
  et (largeur du périphérique: 360px)
  et (hauteur de l'appareil: 640px)
  et (-webkit-device-pixel-ratio: 3) {

}

/ * Portrait * /
@ media screen
  et (largeur du périphérique: 360px)
  et (hauteur de l'appareil: 640px)
  et (-webkit-device-pixel-ratio: 3)
  et (orientation: portrait) {

}

/ * Paysage * /
@ media screen
  et (largeur du périphérique: 360px)
  et (hauteur de l'appareil: 640px)
  et (-webkit-device-pixel-ratio: 3)
  et (orientation: paysage) {

}

/ * ----------- Google Pixel XL ----------- * /

/ * Portrait et paysage * /
@ media screen
  et (largeur du périphérique: 360px)
  et (hauteur de l'appareil: 640px)
  et (-webkit-device-pixel-ratio: 4) {

}

/ * Portrait * /
@ media screen
  et (largeur du périphérique: 360px)
  et (hauteur de l'appareil: 640px)
  et (-webkit-device-pixel-ratio: 4)
  et (orientation: portrait) {

}

/ * Paysage * /
@ media screen
  et (largeur du périphérique: 360px)
  et (hauteur de l'appareil: 640px)
  et (-webkit-device-pixel-ratio: 4)
  et (orientation: paysage) {

}

Téléphones HTC

/* ----------- HTC One ----------- */

/ * Portrait et paysage * /
@ media screen
  et (largeur du périphérique: 360px)
  et (hauteur de l'appareil: 640px)
  et (-webkit-device-pixel-ratio: 3) {

}

/ * Portrait * /
@ media screen
  et (largeur du périphérique: 360px)
  et (hauteur de l'appareil: 640px)
  et (-webkit-device-pixel-ratio: 3)
  et (orientation: portrait) {

}

/ * Paysage * /
@ media screen
  et (largeur du périphérique: 360px)
  et (hauteur de l'appareil: 640px)
  et (-webkit-device-pixel-ratio: 3)
  et (orientation: paysage) {

}

Téléphones Nexus

/ * ----------- Nexus 4 ----------- * /

/ * Portrait et paysage * /
@ media screen
  et (largeur du périphérique: 384 pixels)
  et (hauteur du périphérique: 592 pixels)
  et (-webkit-device-pixel-ratio: 2) {

}

/ * Portrait * /
@ media screen
  et (largeur du périphérique: 384 pixels)
  et (hauteur du périphérique: 592 pixels)
  et (-webkit-device-pixel-ratio: 2)
  et (orientation: portrait) {

}

/ * Paysage * /
@ media screen
  et (largeur du périphérique: 384 pixels)
  et (hauteur du périphérique: 592 pixels)
  et (-webkit-device-pixel-ratio: 2)
  et (orientation: paysage) {

}

/ * ----------- Nexus 5 ----------- * /

/ * Portrait et paysage * /
@ media screen
  et (largeur du périphérique: 360px)
  et (hauteur du périphérique: 592 pixels)
  et (-webkit-device-pixel-ratio: 3) {

}

/ * Portrait * /
@ media screen
  et (largeur du périphérique: 360px)
  et (hauteur du périphérique: 592 pixels)
  et (-webkit-device-pixel-ratio: 3)
  et (orientation: portrait) {

}

/ * Paysage * /
@ media screen
  et (largeur du périphérique: 360px)
  et (hauteur du périphérique: 592 pixels)
  et (-webkit-device-pixel-ratio: 3)
  et (orientation: paysage) {

}

/ * ----------- Nexus 6 et 6P ----------- * /

/ * Portrait et paysage * /
@ media screen
  et (largeur du périphérique: 360px)
  et (hauteur du périphérique: 592 pixels)
  et (-webkit-device-pixel-ratio: 4) {

}

/ * Portrait * /
@ media screen
  et (largeur du périphérique: 360px)
  et (hauteur du périphérique: 592 pixels)
  et (-webkit-device-pixel-ratio: 4)
  et (orientation: portrait) {

}

/ * Paysage * /
@ media screen
  et (largeur du périphérique: 360px)
  et (hauteur du périphérique: 592 pixels)
  et (-webkit-device-pixel-ratio: 4)
  et (orientation: paysage) {

}

Téléphone Windows

/* ----------- Téléphone Windows ----------- */

/ * Portrait et paysage * /
@ media screen
  et (largeur du périphérique: 480px)
  et (hauteur du périphérique: 800px) {

}

/ * Portrait * /
@ media screen
  et (largeur du périphérique: 480px)
  et (hauteur du périphérique: 800px)
  et (orientation: portrait) {

}

/ * Paysage * /
@ media screen
  et (largeur du périphérique: 480px)
  et (hauteur du périphérique: 800px)
  et (orientation: paysage) {

}

Comprimés

iPads

/ * ----------- iPad 1, 2, Mini et Air ----------- * /

/ * Portrait et paysage * /
Écran @média seulement
  et (min-device-width: 768px)
  et (max-device-width: 1024px)
  et (-webkit-min-device-pixel-ratio: 1) {

}

/ * Portrait * /
Écran @média seulement
  et (min-device-width: 768px)
  et (max-device-width: 1024px)
  et (orientation: portrait)
  et (-webkit-min-device-pixel-ratio: 1) {

}

/ * Paysage * /
Écran @média seulement
  et (min-device-width: 768px)
  et (max-device-width: 1024px)
  et (orientation: paysage)
  et (-webkit-min-device-pixel-ratio: 1) {

}

/ * ----------- iPad 3, 4 et Pro 9.7 "----------- * /

/ * Portrait et paysage * /
Écran @média seulement
  et (min-device-width: 768px)
  et (max-device-width: 1024px)
  et (-webkit-min-device-pixel-ratio: 2) {

}

/ * Portrait * /
Écran @média seulement
  et (min-device-width: 768px)
  et (max-device-width: 1024px)
  et (orientation: portrait)
  et (-webkit-min-device-pixel-ratio: 2) {

}

/ * Paysage * /
Écran @média seulement
  et (min-device-width: 768px)
  et (max-device-width: 1024px)
  et (orientation: paysage)
  et (-webkit-min-device-pixel-ratio: 2) {

}

/ * ----------- iPad Pro 10.5 "----------- * /

/ * Portrait et paysage * /
Écran @média seulement
  et (min-device-width: 834px)
  et (max-device-width: 1112px)
  et (-webkit-min-device-pixel-ratio: 2) {

}

/ * Portrait * /
/ * Déclarer la même valeur pour min et max-width pour éviter les collisions avec les ordinateurs de bureau * /
/ * Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
Écran @média seulement
  et (min-device-width: 834px)
  et (max-device-width: 834px)
  et (orientation: portrait)
  et (-webkit-min-device-pixel-ratio: 2) {

}

/ * Paysage * /
/ * Déclarer la même valeur pour min et max-width pour éviter les collisions avec les ordinateurs de bureau * /
/ * Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
Écran @média seulement
  et (min-device-width: 1112px)
  et (max-device-width: 1112px)
  et (orientation: paysage)
  et (-webkit-min-device-pixel-ratio: 2) {

}

/ * ----------- iPad Pro 12.9 "----------- * /

/ * Portrait et paysage * /
Écran @média seulement
  et (min-device-width: 1024px)
  et (max-device-width: 1366px)
  et (-webkit-min-device-pixel-ratio: 2) {

}

/ * Portrait * /
/ * Déclarer la même valeur pour min et max-width pour éviter les collisions avec les ordinateurs de bureau * /
/ * Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
Écran @média seulement
  et (min-device-width: 1024px)
  et (max-device-width: 1024px)
  et (orientation: portrait)
  et (-webkit-min-device-pixel-ratio: 2) {

}

/ * Paysage * /
/ * Déclarer la même valeur pour min et max-width pour éviter les collisions avec les ordinateurs de bureau * /
/ * Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
Écran @média seulement
  et (min-device-width: 1366px)
  et (max-device-width: 1366px)
  et (orientation: paysage)
  et (-webkit-min-device-pixel-ratio: 2) {

}

Tablettes Galaxy

/ * ----------- Galaxy Tab 2 ----------- * /

/ * Portrait et paysage * /
@médias
  (min-device-width: 800px)
  et (max-device-width: 1280px) {

}

/ * Portrait * /
@médias
  (largeur maximale de l'appareil: 800 pixels)
  et (orientation: portrait) {

}

/ * Paysage * /
@médias
  (max-device-width: 1280px)
  et (orientation: paysage) {

}

/ * ----------- Galaxy Tab S ----------- * /

/ * Portrait et paysage * /
@médias
  (min-device-width: 800px)
  et (max-device-width: 1280px)
  et (-webkit-min-device-pixel-ratio: 2) {

}

/ * Portrait * /
@médias
  (largeur maximale de l'appareil: 800 pixels)
  et (orientation: portrait)
  et (-webkit-min-device-pixel-ratio: 2) {

}

/ * Paysage * /
@médias
  (max-device-width: 1280px)
  et (orientation: paysage)
  et (-webkit-min-device-pixel-ratio: 2) {

}

Nexus Comprimés

/ * ----------- Nexus 7 ----------- * /

/ * Portrait et paysage * /
@ media screen
  et (largeur du périphérique: 601px)
  et (hauteur du périphérique: 906px)
  et (-webkit-min-device-pixel-ratio: 1.331)
  et (-webkit-max-device-pixel-ratio: 1.332) {

}

/ * Portrait * /
@ media screen
  et (largeur du périphérique: 601px)
  et (hauteur du périphérique: 906px)
  et (-webkit-min-device-pixel-ratio: 1.331)
  et (-webkit-max-device-pixel-ratio: 1.332)
  et (orientation: portrait) {

}

/ * Paysage * /
@ media screen
  et (largeur du périphérique: 601px)
  et (hauteur du périphérique: 906px)
  et (-webkit-min-device-pixel-ratio: 1.331)
  et (-webkit-max-device-pixel-ratio: 1.332)
  et (orientation: paysage) {

}

/ * ----------- Nexus 9 ----------- * /

/ * Portrait et paysage * /
@ media screen
  et (largeur du périphérique: 1536px)
  et (hauteur du périphérique: 2048px)
  et (-webkit-min-device-pixel-ratio: 1.331)
  et (-webkit-max-device-pixel-ratio: 1.332) {

}

/ * Portrait * /
@ media screen
  et (largeur du périphérique: 1536px)
  et (hauteur du périphérique: 2048px)
  et (-webkit-min-device-pixel-ratio: 1.331)
  et (-webkit-max-device-pixel-ratio: 1.332)
  et (orientation: portrait) {

}

/ * Paysage * /
@ media screen
  et (largeur du périphérique: 1536px)
  et (hauteur du périphérique: 2048px)
  et (-webkit-min-device-pixel-ratio: 1.331)
  et (-webkit-max-device-pixel-ratio: 1.332)
  et (orientation: paysage) {

}

Kindle Fire

/ * ----------- Kindle Fire HD 7 "----------- * /

/ * Portrait et paysage * /
Écran @média seulement
  et (min-device-width: 800px)
  et (max-device-width: 1280px)
  et (-webkit-min-device-pixel-ratio: 1.5) {

}

/ * Portrait * /
Écran @média seulement
  et (min-device-width: 800px)
  et (max-device-width: 1280px)
  et (-webkit-min-device-pixel-ratio: 1.5)
  et (orientation: portrait) {
}

/ * Paysage * /
Écran @média seulement
  et (min-device-width: 800px)
  et (max-device-width: 1280px)
  et (-webkit-min-device-pixel-ratio: 1.5)
  et (orientation: paysage) {

}

/ * ----------- Kindle Fire HD 8.9 "----------- * /

/ * Portrait et paysage * /
Écran @média seulement
  et (min-device-width: 1200px)
  et (max-device-width: 1600px)
  et (-webkit-min-device-pixel-ratio: 1.5) {

}

/ * Portrait * /
Écran @média seulement
  et (min-device-width: 1200px)
  et (max-device-width: 1600px)
  et (-webkit-min-device-pixel-ratio: 1.5)
  et (orientation: portrait) {
}

/ * Paysage * /
Écran @média seulement
  et (min-device-width: 1200px)
  et (max-device-width: 1600px)
  et (-webkit-min-device-pixel-ratio: 1.5)
  et (orientation: paysage) {

}

Ordinateurs portables

Les requêtes de médias pour les ordinateurs portables sont un peu un poids lourd. Au lieu de cibler des périphériques spécifiques, essayez de spécifier une plage de tailles d'écran générale, puis de faire la distinction entre les écrans avec rétine et les écrans sans rétine.

/ * ----------- Écrans non rétiniens ----------- * /
@ media screen
  et (min-device-width: 1200px)
  et (max-device-width: 1600px)
  et (-webkit-min-device-pixel-ratio: 1) {
}

/ * ----------- Écrans Retina ----------- * /
@ media screen
  et (min-device-width: 1200px)
  et (max-device-width: 1600px)
  et (-webkit-min-device-pixel-ratio: 2)
  et (résolution minimale: 192 dpi) {
}

Wearables

Oui, nous y allons. Bien sûr, ces appareils ne sont peut-être pas encore considérés comme des appareils «standard», mais ils sont amusants à regarder.

Apple Watch

/ * ----------- Apple Watch ----------- * /
@médias
  (largeur maximale de l'appareil: 42mm)
  et (min-device-width: 38mm) {

}

Montre Moto 360

/ * ----------- Montre Moto 360 ----------- * /
@médias
  (max-device-width: 218px)
  et (max-device-height: 281px) {

}

Commentaires

Laisser un commentaire

Votre commentaire sera révisé par les administrateurs si besoin.