Comment obtenir la largeur du navigateur à l'aide du code JavaScript?

180

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%.

Existe-t-il une autre meilleure fonction ou une solution de contournement?

javascript jquery html css Amr Elgarhy
la source

Réponses:

133

Mise à jour pour 2017

Ma réponse originale a été écrite en 2009. Bien qu'elle fonctionne toujours, j'aimerais la mettre à jour pour 2017. Les navigateurs peuvent encore se comporter différemment. Je fais confiance à l'équipe jQuery pour faire un excellent travail pour maintenir 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 à la 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() );
Développer l'extrait

Réponse originale

Étant donné que tous les navigateurs se comportent différemment, vous devrez 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 sera renvoyé undefined.

Travis
la source
11
Meilleure réponse car je n'ai pas besoin d'inclure une bibliothèque de 33k pour une simple redirection basée sur la largeur de la fenêtre du navigateur
David Aguirre
1
Cela produit les bons résultats (ou attendus) de manière cohérente par rapport à l'implémentation de jQuery.
Emmanuel John
3
... chacun de ces trois montre des résultats et tous les résultats (largeurs) sont différents. Par exemple, avec Google Chrome, voir self.innerWidth 423, document.documentElement.clientWidth 326et document.body.clientWidth 406. Dans ce cas, question: lequel est correct et lequel utiliser? Par exemple, je veux redimensionner google map. 326 ou 423 grande différence. Si largeur ~ 700, alors voir 759, 735, 742 (pas si grande différence)
Andris
1
@ user2118559 var pageWidth = Math.max(self.innerWidth || 0, document.documentElement.clientWidth || 0, document.body.clientWidth || 0);et var windowWidth = self.innerWidth || -1;// à cause de "corps" ou "écran" ou "document" ne sont pas la "fenêtre" si vous vérifiez un contenu html débordé que vous pouvez comprendre. # i.stack.imgur.com/6xPdH.png
Abdullah Aydın
1
erreur de copier-coller dans votre exemple, getWidth()références de fonctionself.innerHeight
theGecko
309

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

le chaos
la source
2
Si je me souviens bien, jQuery a tiré une grande partie des dimensions dans le noyau. Avez-vous encore besoin de dimensions pour faire ce que vous suggérez?
Nosredna
Il s'avère que non. Ce qui est génial. Réponse modifiée par. Merci pour l'information.
chaos
6
Le support de $ (window) .width () dans jQuery est depuis la version 1.2, au cas où il serait pertinent pour n'importe qui.
chaos
18
J'ai constaté que $ (window) .width () ne renvoie pas toujours la même valeur que innerWidth / clientWidth comme indiqué dans les exemples de la réponse ci-dessous. La version de jQuery ne prend pas en compte les barres de défilement du navigateur (en FF de toute façon). Cela m'a causé beaucoup de confusion avec les requêtes CSS @media semblant se déclencher à la mauvaise largeur. L'utilisation de code natif semble plus fiable car elle prend en compte l'apparence des barres de défilement.
Coder le
5
L'ajout de 30k lignes de code pour obtenir la largeur de la fenêtre est une mauvaise solution!
codechimp
49 
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 tous les navigateurs.

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

Bradley Flood
la source
1
Avoir du mal à l'utiliser sur l'iPhone Safari.
nu everest
17

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 */
}

Je n'ai pas beaucoup testé, mais testé avec les navigateurs Android par défaut et Android Chrome, le chrome de bureau, jusqu'à présent, il semble que cela fonctionne bien.

Bien sûr, il ne renvoie pas de valeur numérique, mais renvoie une valeur booléenne - si elle correspond ou non, cela peut ne pas correspondre exactement à la question, mais c'est ce que nous voulons de toute façon et probablement l'auteur de la question le souhaite.

Darius.V
la source
1
Prend uniquement en charge IE10 +.
qarthandso
17
S'ils utilisent IE9 ou une version antérieure, ils ne méritent pas Internet.
Darius.V
L'iphone Safari ne semble pas prendre en charge cela.
nu everest
Les nouvelles versions d'iOS Safari devraient prendre en charge matchMedia. Source: caniuse.com/#feat=matchmedia
Vargr
8

De W3schools et de son navigateur croisé à l'âge sombre d'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>
user3651121
la source
L'approche fonctionne à merveille et pourrait être la réponse acceptée, car elle est beaucoup plus courte que toute autre solution (en dehors de l'utilisation de jQuery).
Simon Steinberger
2
Ne génère-t-il pas une erreur si document.documentElement n'est pas défini?
PhiLho
6

Voici une version plus courte 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;
}
Ismael
la source
4
Ce qui ne renvoie pas de valeur si toutes les conditions sont fausses.
Mike C
10
Vous n'avez pas besoin des autres :)
Nick
0

Une solution adaptée à la réponse JS moderne de Travis:

const getPageWidth = () => {
  const bodyMax = document.body
    ? Math.max(document.body.scrollWidth, document.body.offsetWidth)
    : 0;

  const docElementMax = document.documentElement
    ? Math.max(
        document.documentElement.scrollWidth,
        document.documentElement.offsetWidth,
        document.documentElement.clientWidth
      )
    : 0;

  return Math.max(bodyMax, docElementMax);
};
Sergiu
la source
0

Un ajout important à la réponse de Travis; vous devez mettre getWidth () dans le corps de votre document pour vous assurer que la largeur de la barre de défilement est comptée, sinon la largeur de la barre de défilement du navigateur soustraite de getWidth (). Ce que j'ai fait ;

<body>
<script>
function getWidth(){
return Math.max(document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth);
}
var aWidth=getWidth();
</script>
</body>

et appelez une variable Width n'importe où par la suite.

burkul
la source