Résumé des méthodes permettant d'obtenir la largeur et la hauteur d'une page Web à l'aide des compétences javascript_javascript

document.body.clientWidth - la largeur de la zone visible de la page Web
document.body.clientHeight - la hauteur de la zone visible de la page Web

document.body.offsetWidth - la largeur de la zone visible de la page Web, y compris la largeur des bords et des barres de défilement
document.body.offsetHeight - la hauteur de la zone visible de la page Web, y compris la hauteur des bords et des barres de défilement [FF, chrom est la hauteur de la page entière, IE Opera est normal]

document.body.scrollWidth - la largeur totale de la page Web
document.body.scrollHeight - la hauteur totale de la page Web

document.body.scrollTop - Lorsqu'il y a une barre de défilement, faites glisser la barre de défilement vers le bas et la hauteur de la partie qui n'est pas affichée au dessus
document.body.scrollLeft - Comme ci-dessus

window.innerHeight - La hauteur intérieure de la fenêtre du navigateur

window.innerWidth - La largeur intérieure de la fenêtre du navigateur

window.screenTop - la distance entre le haut du document Web et le haut de l'écran sur la partie texte de la page Web, mais FF ne la prend pas en charge, Chrom, IE et Opera se comportent différemment, utilisez donc with. attention]
window.screenLeft - Le côté gauche du texte de la page Web [la distance entre l'extrême gauche du document de la page Web et l'extrême gauche de l'écran, mais Chrom, IE et Opera se comportent différemment, utilisez-le donc. avec prudence]

window.screen.height - la hauteur de la résolution de l'écran
window.screen.width - la largeur de la résolution de l'écran

window.screen.availHeight - hauteur de la zone de travail disponible [écran entier mais sans la barre des tâches inférieure]
window.screen.availWidth - Largeur de la zone de travail disponible [largeur de tout l'écran]

window.screen.clorDepth - couleur de l'écran, couramment utilisée 16, 32 bits, etc.
window.screen.deviceXDPI - pixels d'écran/pouce [pris en charge par IE, non pris en charge par d'autres]

Méthode JavaScript pour obtenir la largeur et la hauteur de la page

<script>
function getInfo()
{
  var s = "";
  s += " 网页可见区域宽："+ document.body.clientWidth;
  s += " 网页可见区域高："+ document.body.clientHeight;
  s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)";
  s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)";
  s += " 网页正文全文宽："+ document.body.scrollWidth;
  s += " 网页正文全文高："+ document.body.scrollHeight;
  s += " 网页被卷去的高(ff)："+ document.body.scrollTop;
  s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop;
  s += " 网页被卷去的左："+ document.body.scrollLeft;
  s += " 网页正文部分上："+ window.screenTop;
  s += " 网页正文部分左："+ window.screenLeft;
  s += " 屏幕分辨率的高："+ window.screen.height;
  s += " 屏幕分辨率的宽："+ window.screen.width;
  s += " 屏幕可用工作区高度："+ window.screen.availHeight;
  s += " 屏幕可用工作区宽度："+ window.screen.availWidth;
  s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
  s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
  //alert (s);
}
getInfo();
</script>

Dans mon test local :
Peut être utilisé sous IE, FireFox et Opera

document.body.clientWidth
document.body.clientHeight

Vous pouvez l’obtenir dès maintenant, c’est très simple et pratique.
Et parmi 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 ce sont les standards du W3C qui posent problème

958d744a298c46c0daa211c304ba8ee6
Si vous ajoutez cette ligne de balises à la page

Dans IE :

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

Dans FireFox :

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

Dans Opéra :

document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

Et s'il n'y a pas de norme W3C définie, alors

IE est :

document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0

FireFox c'est :

Copier le code Le code est le suivant :

document.documentElement.clientWidth ==> , largeur de l'objet BODY plus largeur de la marge supérieure)
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)

L'Opéra c'est :

Copier le code Le code est le suivant :

document.documentElement.clientWidth ==> (c'est-à-dire la largeur de l'objet CORPS plus la 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)

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.