Comment obtenir les dimensions de l'écran, de la fenêtre et de la page Web en JavaScript

Bonjour mes amis!



Je présente à votre attention la traduction d'un petit article "Comment obtenir les tailles d'écran, de fenêtre et de page Web en JavaScript" par Dmitri Pavlutin.



Pour déterminer l'orientation de la fenêtre du navigateur (paysage ou portrait), vous pouvez comparer sa largeur et sa hauteur.



Cependant, il est facile de se perdre dans toutes sortes de tailles disponibles: il existe des tailles d'écran, des tailles de fenêtre, des pages Web, etc.



Que signifient ces tailles et, surtout, comment les obtenir? Voilà de quoi je vais parler.

1. Écran

1.1. Taille de l'écran

La taille de l'écran correspond à la largeur et à la hauteur de tout l'écran: moniteur ou écran mobile.







Vous pouvez obtenir des informations sur la taille de l'écran en utilisant la screenpropriété object window:

const screenWidth = window.screen.width
const screenHeight = window.screen.height

1.2. Taille d'écran disponible

La taille d'écran disponible est la largeur et la hauteur de l'écran actif sans la barre d'outils du système d'exploitation.







Pour obtenir la taille d'écran disponible, nous nous tournons à nouveau vers window.screen:

const availableScreenWidth = window.screen.availWidth
const availableScreenHeight = window.screen.availHeight

2. Fenêtre

2.1. Taille de la fenêtre extérieure (ou taille de la fenêtre extérieure)

La taille de la fenêtre externe est la largeur et la hauteur de la fenêtre de navigateur actuelle, y compris la barre d'adresse, la barre d'onglets et d'autres panneaux du navigateur.







Vous pouvez obtenir des informations sur la taille de la fenêtre externe en utilisant les propriétés outerWidthet l' outerHeightobjet window:

const windowOuterWidth = window.outerWidth
const windowOuterHeight = window.outerHeight

2.2. Taille de la fenêtre intérieure (ou taille de la fenêtre intérieure)

La taille interne de la fenêtre est la largeur et la hauteur de la fenêtre (fenêtre).







L'objet windowfournit des propriétés innerWidthet innerHeight:

const windowInnerWidth = window.innerWidth
const windowInnerHeight = window.innerHeight

Si nous voulons obtenir la taille intérieure de la fenêtre sans barres de défilement, nous procédons comme suit:

const windowInnerWidth = document.documentElement.clientWidth
const windowInnerHeight = document.documentElement.clientHeight

3. Taille de la page Web

La taille de la page Web correspond à la largeur et à la hauteur du contenu affiché (contenu rendu).







Utilisez ce qui suit pour obtenir la taille de la page Web (inclut le remplissage de page, mais exclut les bordures, le remplissage et les barres de défilement):

const pageWidth = document.documentElement.scrollWidth
const pageHeight = document.documentElement.scrollHeight

Si elle est pageHeightsupérieure à la hauteur intérieure de la fenêtre, une barre de défilement verticale est présente.

4. Conclusion

J'espère que vous comprenez maintenant comment obtenir différentes tailles.



La taille de l'écran est la taille du moniteur (ou de l'affichage), et la taille d'écran disponible est la taille de l'écran sans les barres d'outils du système d'exploitation.



La taille de la fenêtre extérieure correspond à la taille de la fenêtre active du navigateur (y compris la barre de recherche, la barre d'onglets, les barres latérales ouvertes, etc.) et la taille de la fenêtre intérieure correspond à la taille de la fenêtre.



Enfin, la taille de la page Web correspond à la taille du contenu.



Merci de votre attention, mes amis!