Largeurs standard écrans - Mémento

Soumis par Stéphane ARRAMI le sam 30/09/2017 - 14:12

Tailles écran standards

Tailles écran standard Desktop
Largeurs Desktop Date
600px 1990
800px 2000
980px 2010
1200px aujourd'hui

Partir d'une déclinaison par le bas (mobile first) et Retina Ready

Smartphones

Tailles écran téléphones
Modèle Taille de l'écran (en pouces) Résolution (en pixel)
Samsung Galaxy S6 5,1 2560x1440
Google Pixel 5 1920x1080
Sony Xperia X 5 1920x1080
HTC One 5 1920x1080
Samsung Galaxy S4 5 1080x1920
IPhone 6s 4,7 1334x750
Iphone 5C 4 1136x640
Iphone 5S 4 1136x640
Ipod Touch 4 320x480
Samsung Galaxy S 4 480x800

Utiliser les cadradins (em) plutôt que les pixels (px).

Phablettes (hybrides téléphone/tablette)

Tailles écran phablettes
Modèle Taille de l'écran (en pouces) Résolution (en pixel)
Sony Z Ultra 5,7 1920x1080
LG V20 5,7 2560x1140
LG G5 5,3 2560x1140
Microsoft Lumina 950XL 5,7 2560x1140
Google Nexus 6P 5,7 2560x1140
IPhone 6S Plus 5,5 1920x1080
Iphone 7 Plus 5,5 1920x1080
Google Pixel XL 5,5 2560x1140
Samsung Galaxy S7 Edge 5,5 2560x1140

Tablettes

Tailles écran tablettes
Modèle Taille de l'écran (en pouces) Résolution (en pixel)
Ipad Pro 12,9 12,9 2732x2048
Ipad Pro 9.7 9,7 2048x1536
Ipad Air 9,7 2048x1536
Samsung Galaxy Tab S2 8 2048x1536
Samsug Galaxy Tab S2 9,7 9,7 2048x1536
Microsoft Surface Pro 4 12,3 2736x1824
Amazone Fire HD 8 8 1280x800

Les navigateurs mobile simulent une largeur d'écran : le viewport

En CSS, avec les média queries vous ciblez l'écran avec la propriété max-witdh. Le viewport change selon le navigateur mobile utilisé. Le navigateur compare le sien avec la largeur indiquée avec max-width.

Viewport : zone d'affichage simulée, largeur de la fenêtre du navigateur sur mobile.

Largeurs de viewport par défaut

Media queries et navigateurs mobiles
Navigateur Largeur du viewport par défaut
Opera Mobile 850px
IPhone Safari 980px
Android 800px
Windows Phone 1024px

Syntaxe de mise à l'échelle

Balise qui permet de dire au navigateur «choisi ta propre largeur fixe, je te fais confiance» par un viewport dynamique :

<meta name="viewport" content="width=device-width, initiale-scale=1.0" />

Ciblage smartphone avec max-device-with

On cible les smartphones par une règle basée sur le nombre réel de pixels affichés à l'écran : max-device-with

La propriété max-device-with correspond à la largeur du périphérique.

Les mobiles ne dépassent pas 480px de large.

Garder la navigation à l'écran.

Le contenu principal doit apparaître en premier (content first).

Utiliser des préfixes navigateurs.

Détection la disponibilité des technologies next-gen dans le navigateur de l'utilisateur avec la bibliothèque JS Modernizr.

/* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) { } /* Portrait */ @media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { }

 

Étiquettes