Obtenir la hauteur et la largeur de la fenêtre du navigateur sans barres de défilement à l'aide de jquery ?

Question

Comment obtenir la hauteur et la largeur de la fenêtre du navigateur sans barres de défilement à l'aide de jQuery ?

Voici ce que j'ai essayé jusqu'à présent :

       var viewportWidth = $("body").innerWidth();
       var viewportHeight = $("body").innerHeight();

Cette solution ne tient pas compte des barres de défilement du navigateur.

Answer 1

$(window).height();
$(window).width();

Plus d'informations

• http://api.jquery.com/height/
• http://api.jquery.com/width/

L'utilisation de jQuery n'est toutefois pas indispensable pour obtenir ces valeurs. Utilisez

document.documentElement.clientHeight;
document.documentElement.clientWidth;

pour obtenir les tailles sans les barres de défilement, ou

window.innerHeight;
window.innerWidth;

pour obtenir l'ensemble de la fenêtre d'affichage, y compris les barres de défilement.

document.documentElement.clientHeight <= window.innerHeight;  // is always true

Answer 2

N'utilisez pas jQuery, utilisez simplement javascript pour un résultat correct :

Cela inclut la largeur/hauteur de la barre de défilement :

var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

alert('viewport width is: '+ windowWidth + ' and viewport height is:' + windowHeight);

Ceci exclut la largeur/hauteur de la barre de défilement :

var widthWithoutScrollbar = document.body.clientWidth;
var heightWithoutScrollbar = document.body.clientHeight;

alert('viewport width is: '+ widthWithoutScrollbar + ' and viewport height is:' + heightWithoutScrollbar);

Answer 3

Voici un JS générique qui devrait fonctionner dans la plupart des navigateurs (FF, Cr, IE6+) :

var viewportHeight;
var viewportWidth;
if (document.compatMode === 'BackCompat') {
    viewportHeight = document.body.clientHeight;
    viewportWidth = document.body.clientWidth;
} else {
    viewportHeight = document.documentElement.clientHeight;
    viewportWidth = document.documentElement.clientWidth;
}

Answer 4

Vous utilisez les mauvaises méthodes d'appel. Une fenêtre d'affichage est la "fenêtre" ouverte sur le document : la partie que vous pouvez voir et où.

Utilisation de $(window).height() ne vous donnera pas la taille de la fenêtre d'affichage, mais la taille de la fenêtre entière, qui est généralement la taille du document entier, bien que le document puisse être encore plus grand.

Pour obtenir la taille de la fenêtre d'affichage actuelle, utilisez window.innerHeight y window.innerWidth .

https://gist.github.com/bohman/1351439

N'utilisez pas les méthodes jQuery, par ex. $(window).innerHeight() car ils donnent des chiffres erronés. Ils vous donnent la hauteur de la fenêtre, et non pas la largeur de la fenêtre. innerHeight .

Answer 5

Description

Ce qui suit vous donnera la taille de la fenêtre d'affichage du navigateur.

Echantillon

$(window).height();   // returns height of browser viewport
$(window).width();   // returns width of browser viewport

Plus d'informations

• jQuery.height()
• jQUery.width()