web-dev-qa-db-fra.com

Comment obtenir la largeur du navigateur en utilisant le code JavaScript?

J'essaie d'écrire une fonction JavaScript pour obtenir la largeur actuelle du navigateur.

J'ai trouvé celui-ci:

javascript:alert(document.body.offsetWidth);

Mais son problème est qu'il échoue si le corps a une largeur de 100%.

Y at-il une autre meilleure fonction ou une solution de contournement?

javascriptjqueryhtmlcss
170
Amr Elgarhy

Mise à jour pour 2017

Ma réponse originale avait été écrite en 2009. Bien que cela fonctionne toujours, j'aimerais la mettre à jour pour 2017. Les navigateurs peuvent toujours se comporter différemment. Je fais confiance à l'équipe de jQuery pour faire un excellent travail en maintenant la cohérence entre les navigateurs. Cependant, il n'est pas nécessaire d'inclure la bibliothèque entière. Dans la source jQuery, la partie pertinente se trouve sur ligne 37 de dimensions.js . Ici, il est extrait et modifié pour fonctionner de manière autonome:

function getWidth() {
  return Math.max(
    document.body.scrollWidth,
    document.documentElement.scrollWidth,
    document.body.offsetWidth,
    document.documentElement.offsetWidth,
    document.documentElement.clientWidth
  );
}

function getHeight() {
  return Math.max(
    document.body.scrollHeight,
    document.documentElement.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.offsetHeight,
    document.documentElement.clientHeight
  );
}

console.log('Width:  ' +  getWidth() );
console.log('Height: ' + getHeight() );

Réponse originale

Étant donné que tous les navigateurs se comportent différemment, vous devez d'abord tester les valeurs, puis utiliser la bonne. Voici une fonction qui fait cela pour vous:

function getWidth() {
  if (self.innerWidth) {
    return self.innerWidth;
  }

  if (document.documentElement && document.documentElement.clientWidth) {
    return document.documentElement.clientWidth;
  }

  if (document.body) {
    return document.body.clientWidth;
  }
}

et de même pour la hauteur:

function getHeight() {
  if (self.innerHeight) {
    return self.innerHeight;
  }

  if (document.documentElement && document.documentElement.clientHeight) {
    return document.documentElement.clientHeight;
  }

  if (document.body) {
    return document.body.clientHeight;
  }
}

Appelez les deux dans vos scripts en utilisant getWidth() ou getHeight(). Si aucune des propriétés natives du navigateur n'est définie, il retournera undefined.

114
Travis

C'est un douleur dans le cul . Je recommande de sauter le non-sens et d'utiliser jQuery , ce qui vous permet juste de faire $(window).width().

302
chaos
var w = window.innerWidth;
var h = window.innerHeight;
var ow = window.outerWidth; //including toolbars and status bar etc.
var oh = window.outerHeight;

Les deux renvoient des entiers et ne nécessitent pas jQuery. Compatible avec plusieurs navigateurs.

Je trouve souvent que jQuery renvoie des valeurs invalides pour width () et height ()

47
Bradley Flood

Pourquoi personne ne mentionne matchMedia?

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
} else {
  /* the viewport is less than 400 pixels wide */
}

N'a pas testé beaucoup, mais testé avec Android default et Android chrome navigateurs, bureau chrome, jusqu'à présent, il semble que cela fonctionne bien.

Bien sûr, il ne renvoie pas de valeur numérique, mais renvoie booléen - si des correspondances ou non, ne correspond peut-être pas exactement à la question, mais c'est ce que nous voulons de toute façon et probablement l'auteur de question veut.

14
Darius.V

De W3schools et de son navigateur croisé aux temps sombres de IE!

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";

alert("Browser inner window width: " + w + ", height: " + h + ".");

</script>

</body>
</html>
7
user3651121

Voici une version abrégée de la fonction présentée ci-dessus:

function getWidth() {
    if (self.innerWidth) {
       return self.innerWidth;
    }
    else if (document.documentElement && document.documentElement.clientHeight){
        return document.documentElement.clientWidth;
    }
    else if (document.body) {
        return document.body.clientWidth;
    }
    return 0;
}
6
ismael