Le rendu d’un site web sur un appreil est conditionné par deux paramètres importants :
- La résolution physique d’un écran, c’est à dire le nombre de pixels que l’écran peut physiquement afficher (hardware).
- La résolution virtuelle d’un système, appellée viewport ("vue") en web, c’est-à-dire la résolution effective utilisée par l’appareil (software). Les appareils modernes utilisent souvent une résolution effective par défaut deux, voir trois fois inférieure (pour les mobiles) à la résolution physique de leurs écrans pour certaines applications. Cela permet d’éviter que la taille effective des caractères notemment ne devienne trop petite, car plus la résolution physique (en pixel par pouce) est élevée, plus la taille physique d’un pixel (en mm ou pouces) est basse. On rappelle que la taille effective d’un pixel est entierement relative à chaque appareil, et donc dépendante des choix de chaque fabricant.
Un trosième paramètre important qui impacte directement la mise en page est le ratio (dit aspect-ratio) de l’écran (ou de la fenêtre pour les appareils non mobiles).
Quelques viewports et ratios courants
Petits téléphones
-
Samsung Galaxy S8
- Viewport : 360 x 740px
- Aspect-ratio : 9 / 18.5
-
iPhone SE (gen 3)
- Viewport : 375px x 667px
- Aspect-ratio : 9 / 16
-
iPhone 13 mini
- Viewport : 375 x 812px
- Aspect-ratio : 9 / 19.5
Grands téléphones
-
Samsung Galaxy S20 Ultra
- Viewport : 412 x 915px
- Aspect-ratio : 9 / 20
-
iPhone 15 Pro Max
- Viewport : 430 x 932px
- Aspect-ratio : 9 / 19.5
Tablettes
-
iPad / iPad Mini
- Viewport : 810 x 1080px
- Aspect-ratio : 3 / 4
-
iPad Pro
- Viewport : 1024 x 1336px
- Aspect-ratio : 3 / 4
Laptops
-
Écran HD
- Viewport : 1280 x 720px
- Aspect-ratio : 16 / 9
-
Écran Full HD
- Viewport : 1920 x 1080px
- Aspect-ratio : 16 / 9
-
MacBook Pro 13 pouces
- Viewport : 1440 x 900px
- Aspect-ratio : 16 / 10
-
MacBook Pro 14 pouces
- Viewport : 1512 x 982px
- Aspect-ratio : 16 / 10
-
MacBook Pro 16 pouces
- Viewport : 1728 x 117px
- Aspect-ratio : 16 / 10
Desktop
-
iMac 24 pouces
- Viewport : 2240 x 1260px
- Aspect-ratio : 16 / 9
-
iMac 27 pouces
- Viewport : 2560 x 1440px
- Aspect-ratio : 16 / 9
Ici, une série d’images téléchargeables reprenant les tailles et ratio courants de viewports.
Taille effective de la fenêtre du navigateur
Attention ! La taille effective de la fenêtre du navigateur diffère du viewport de l’écran, car les navigateurs ont toujours des barres de menu, d’adresses, et / ou de favoris dans le cas d’ordinateurs non-mobiles. Veillez à prendre ne compte ce paramètres lorsque vous designez et ne soyez pas surpris de voir votre mise en page légerement plus carrée dans la réalité que dans l’inspecteur web (les inspecteurs web des navigateurs, qui permettent de simuler d’autres appareils, ne prennent pas en compte les barres de menu).
Liste de pas responsive suggérés
-
Desktop :
Référence : Full HD
Largeur : Supérieure à 1920px -
Laptop :
Référence : Full HD
Largeur : Inférieure ou égale à 1920px -
Tablette :
Référence : iPad
Largeur : Inférieure ou égale à 810px -
Grand mobile :
Référence : iPhone Pro Max
Largeur : Inférieure ou égale à 430px -
Petit mobile :
Référence : iPhone SE (3 gen)
Largeure : Inférieure ou égale à 375px