Taille du navigateur (largeur et hauteur)

Question

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 librairie jQuery au projet, donc je préfère utiliser JavaScript. Quelle serait la manière courte et efficace de faire la même chose avec JavaScript?

Answer 1

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

Answer 2

Essayez ceci;

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

Answer 3

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] 
} 

navigateurs IE sont les seuls qui n'utilisent pas innerHeight et la largeur.

Mais il n'y a pas de 'standard' - juste des implémentations de navigateur.

Testez le html (document.documentElement) clientHeight avant de vérifier le corps si ce n'est pas 0, c'est la hauteur de la 'viewport' et le body.clientHeight est la hauteur du corps qui peut être plus grande ou plus petit 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.

Identique à la largeur.

Answer 4

Mon utilisation de cas pour window.innerWidth impliquait la construction d'une fenêtre contextuelle modale personnalisée. Autrement dit, l'utilisateur clique sur le bouton, la fenêtre 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 rappelez-vous window.innerWidth and window.innerHeight ne compensent pas les barres de défilement, donc si votre contenu va au-delà de la zone de contenu visible. Je devais soustraire 17px de la valeur.

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

Depuis le contenu du site toujours allé au-delà de 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 tout le chemin vers le bas du contenu que j'ai utilisé document.body.clientHeight.

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

J'ai testé la pop dans IE, FF, Chrome, et il semble bon dans tous les domaines. Je sais que cela ne suit pas trop la question originale 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 pop-up modale personnalisée.

Answer 5

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; 


}