Site responsive et hauteur

La taille d’un écran (device, terminal)  ne correspond pas à la taille d’affichage d’un site Web.

Un exemple vaut toutes les explications du monde:

Mon écran a une définition de 1920×1080 c’est-à-dire, 1920 pixels (px) de large et 1080 px de haut:

Resolution

Cependant, un site web, ne sera pas affiché sur la totalité de l’écran (sauf à utiliser F11), mais uniquement dans la fenêtre de navigation du navigateur:

Resolution2

Si la largeur de la fenêtre correspond en général à la largeur de l’écran, il n’en va pas de même avec la hauteur. En effet, la taille de cette fenêtre, sur un même écran,  va dépendre du navigateur utilisé et des différentes barres d’outils actives dans les navigateurs.

Ainsi sous Firefox, avec mes barres d’outils, ma hauteur de fenêtre est de 917px:

Resolution3

Si j’ajoute la barre de recherche, ma hauteur de fenêtre ne fait plus que 886px:

Resolution4

Sous Chrome, par défaut (je n’ai pas de barre d’outils) elle fait: 979px

Resolution5

Et sous ie 961px

Resolution6

On voit bien ici que la hauteur d’affichage n’est donc pas une donnée fiable pour intégrer un site en responsive.

Le site que j’utilise pour ces exemples est: http://mediaqueriestest.com

Et j’en reparlerai.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Merci de renseigner le captcha ! * Time limit is exhausted. Please reload CAPTCHA.