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?
Réponses:
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() );É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.
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)
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
getWidth()références de fonctionself.innerHeight
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().
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 ()
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.
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>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;
}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);
};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.