web-dev-qa-db-fra.com

Taille du navigateur (largeur et hauteur)

J'essaie de détecter la taille actuelle du navigateur (largeur et hauteur). Je sais que c'est super facile dans jQuery avec $(document).width and $(document).height, mais je ne veux pas ajouter la taille de la bibliothèque jQuery au projet, donc je préfère simplement utiliser le JavaScript intégré. Quelle serait la manière courte et efficace de faire la même chose avec JavaScript?

javascriptjquerybrowser
45
dono
// first get the size from the window
// if that didn't work, get it from the body
var size = {
  width: window.innerWidth || document.body.clientWidth,
  height: window.innerHeight || document.body.clientHeight
}
81
Joel
function getWindowSize(){
 var d= document, root= d.documentElement, body= d.body;
 var wid= window.innerWidth || root.clientWidth || body.clientWidth, 
 hi= window.innerHeight || root.clientHeight || body.clientHeight ;
 return [wid,hi]
}

Les navigateurs IE sont les seuls à ne pas utiliser innerHeight et Width.

Mais il n'y a pas d'implémentations de navigateur "standard".

Testez le clientHeight html (document.documentElement) avant de vérifier le corps - si ce n'est pas 0, c'est la hauteur de la 'fenêtre' et le corps.clientHeight est la hauteur du corps - qui peut être plus grande ou plus petite que la fenêtre .

Le mode arrière renvoie 0 pour l'élément racine et la hauteur de la fenêtre (fenêtre) à partir du corps.

Idem en largeur.

8
kennebec

Essaye ça;

 <script type="text/javascript"> 
winwidth=document.all?document.body.clientWidth:window.innerWidth; 
winHeight=document.all?document.body.clientHeight:window.innerHeight; 
alert(winwidth+","+winHeight);
</script>
3
Enrique

Voici un exemple de code

function getSize(){

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

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


}
3
Sriwantha Attanayake

Mon cas d'utilisation pour window.innerWidth impliquait la création d'une fenêtre contextuelle modale personnalisée. Autrement dit, l'utilisateur clique sur le bouton, la fenêtre contextuelle s'ouvre centrée dans le navigateur et il y a un bkgd noir transparent derrière la fenêtre contextuelle. Mon problème était de trouver la largeur et la hauteur du navigateur pour créer le bkgd transparent.

Le window.innerWidth fonctionne très bien pour trouver la largeur mais n'oubliez pas window.innerWidth and window.innerHeight ne compense pas les barres de défilement, donc si votre contenu dépasse la zone de contenu visible. J'ai dû soustraire 17px de la valeur.

transBkgd.style.width = (window.innerWidth - 17) + "px";

Étant donné que le contenu du site dépassait toujours la hauteur visible, je ne pouvais pas utiliser window.innerHeight. Si l'utilisateur faisait défiler vers le bas, le bkgd transparent se terminerait à ce moment-là et cela aurait juste l'air méchant. Afin de maintenir le bkgd transparent jusqu'au bas du contenu, j'ai utilisé document.body.clientHeight.

transBkgd.style.height = document.body.clientHeight + "px";

J'ai testé le pop-up dans IE, FF, Chrome, et il semble bon à tous les niveaux. Je sais que cela ne suit pas trop la question d'origine, mais je pense que cela pourrait aider si quelqu'un d'autre rencontre le même problème lors de la création d'une fenêtre modale personnalisée.

2
Dzeimsas Zvirblis