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 ?
C'est un casse-pieds . Je recommande de ne pas faire de bêtises et d'utiliser jQuery qui vous permet de faire $(window).width() .
Si je me souviens bien, jQuery a intégré une grande partie des dimensions dans le noyau. Avez-vous encore besoin de dimensions pour faire ce que vous suggérez ?
La prise en charge de $(window).width() dans jQuery date de la version 1.2, au cas où cela intéresserait quelqu'un.
Ma réponse originale a été rédigée 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 de jQuery pour faire un excellent travail de maintien de la cohérence inter-navigateurs. Cependant, il n'est pas nécessaire d'inclure l'ensemble de la bibliothèque. Dans le code source de jQuery, la partie concernée se trouve à l'adresse suivante 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() );Comme 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 tous les deux dans vos scripts en utilisant getWidth() o getHeight() . Si aucune des propriétés natives du navigateur n'est définie, il retournera undefined .
Meilleure réponse parce que 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.
Cela produit les bons résultats (ou les résultats attendus) de manière cohérente par rapport à la mise en œuvre de jQuery.
... chacun de ces trois montre un certain résultat et tous les résultats (largeurs) sont différents. Par exemple avec Google Chrome voir self.innerWidth 423 , document.documentElement.clientWidth 326 y document.body.clientWidth 406 . Dans ce cas, la question est la suivante : quelle est la bonne solution et laquelle utiliser ? Par exemple je veux redimensionner google map. 326 ou 423 grande différence. Si la largeur ~ 700, alors voir 759, 735, 742 (pas une si grande différence).
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 de jQuery. Elles sont compatibles 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 j'ai 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, elle ne renvoie pas une valeur numérique, mais un booléen - si elle correspond ou non, ce qui peut ne pas correspondre exactement à la question, mais c'est ce que nous voulons de toute façon et probablement ce que l'auteur de la question veut.
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> Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
