Comment obtenir la taille de la fenêtre de différents navigateurs en JavaScript ?

En raison des différences entre les navigateurs, la compatibilité doit être prise en compte lors de l'obtention de nombreuses informations. La taille disponible du document dans la fenêtre est une information souvent nécessaire. En raison des différents navigateurs et même des différentes versions, les méthodes d'acquisition le sont également. différent. Cet article présente La fonction est compatible avec différents navigateurs pour obtenir ces informations. Dans le même temps, l'article explique également en détail les différences dans la manière dont les navigateurs traitent ces informations.

À propos de l'obtention de la taille de la fenêtre visible de différents navigateurs :

<script> <br>function getInfo() <br>{ <br>var s = "" <br>s = "La largeur de la zone visible de la page Web :" document.body.clientWidth; <br>s = "La hauteur de la zone visible de la page Web :" document.body.clientHeight; >s = "La largeur de la zone visible de la page Web : " document.body.offsetWidth " (Y compris la largeur des lignes latérales et des barres de défilement)" <br>s = "La hauteur de la zone visible de la page web : " document.body.offsetHeight " (Y compris la largeur des lignes latérales)"; <br>s = "La largeur du texte intégral de la page web : " document .body.scrollWidth; <br>s = "La hauteur du texte intégral de la page Web :" document.body.scrollHeight; <br>s = "La hauteur de la page Web en cours de défilement (ff) :" document.body.scrollTop <br>s = "La hauteur à laquelle la page Web défile (c'est-à-dire) :" document.documentElement.scrollTop; <br>s = "Le côté gauche de la page Web à faire défiler :" document.body.scrollLeft; = "Le texte principal de la page Web : " window.screenTop; <br>s = " Partie gauche du texte de la page Web : " window.screenLeft; <br>s = " Haute résolution d'écran : " window.screen.height; <br>s = " Résolution de l'écran Largeur : " window.screen.width; <br>s = " Hauteur de la zone de travail disponible de l'écran : " window.screen.availHeight; <br>s = " Largeur de la zone de travail disponible de l'écran : " window. .screen.availWidth; <br> s = "Votre paramètre d'écran est " window.screen.colorDepth " bit color "; <br>s = " Votre paramètre d'écran est " window.screen.deviceXDPI " pixels/pouces "; >//alerte(s) ; <br>} <br>getInfo(); <br></script>


Dans mon test local :

Dans IE, FireFox, Opera Vous pouvez utiliser document.body.clientWidth

document.body.clientHeight

pour l'obtenir. C'est très simple et pratique.
Dans les projets d'entreprise :


Opera utilise toujours

document.body.clientWidth document.body.clientHeight

Mais IE et FireFox utilisent

document.documentElement.clientWidth document.documentElement.clientHeight

Il s'avère que la norme W3C pose problème

if Si vous ajoutez cette ligne de balises à la page, dans IE :

document.body.clientWidth ==> Largeur de l'objet BODY document.body.clientHeight ==> Hauteur de l'objet BODY

document.documentElement.clientWidth ==> Largeur de la zone visible

document.documentElement.clientHeight ==> Hauteur de la zone visible


Dans FireFox :

document. body.clientWidth ==> Largeur de l'objet BODY document.body.clientHeight ==> ==> Hauteur de la zone visible

Dans Opera :

document.body.clientWidth ==> Largeur de la zone visible

document.body .clientHeight ==> Hauteur de la zone visible document.documentElement.clientWidth ==>gt; largeur de l'objet plus largeur de la marge) document.documentElement.clientHeight ==> Hauteur de l'objet de la page (c'est-à-dire la hauteur de l'objet BODY plus la hauteur de la marge)

Et si la norme W3C n'est pas définie, alors

IE est :

document.documentElement.clientWidth ==> ; 0

document.documentElement.clientHeight ==> >FireFox est :

document.documentElement.clientWidth ==> largeur de l'objet de page (c'est-à-dire la largeur de l'objet BODY plus la largeur de la marge) document.documentElement.clientHeight ==> Hauteur de l'objet de page (qui est la hauteur de l'objet BODY plus la hauteur de la marge)

Opera est :

document.documentElement.clientWidth ==> width) document.documentElement.clientHeight ==> Hauteur de l'objet de la page (c'est-à-dire la hauteur de l'objet BODY plus la hauteur de la marge)

JS Obtenir la taille de la fenêtre du navigateur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!