jQuery - Comment obtenir une largeur d’écran sans barre de défilement?

Question

J'ai un élément et j'ai besoin de sa largeur sans (!) Barre de défilement verticale.

Firebug me dit que la largeur du corps est de 1280px.

L'une ou l'autre de ces solutions fonctionne bien dans Firefox:

 console.log($('.element').outerWidth() );
console.log($('.element').outerWidth(true) );

$detour = $('.child-of-element').offsetParent();
console.log( $detour.innerWidth() );
 

Ils retournent tous 1263px , ce qui est la valeur que je recherche.

Cependant, tous les autres navigateurs me donnent 1280px .

Existe-t-il un moyen de navigation croisé pour obtenir une largeur plein écran sans (!) Barre de défilement verticale?

Answer 1

Essayez ceci:

 var iw = $('body').innerWidth();
 

démo jsBin

Answer 2

Vous pouvez utiliser de la vanille javascript en écrivant:

var width = el.clientWidth;

Vous pouvez également l'utiliser pour obtenir la largeur du document comme suit:

var docWidth = document.documentElement.clientWidth || document.body.clientWidth;

Source: MDN

Vous pouvez également obtenir la largeur de la fenêtre complète, y compris la barre de défilement, comme suit:

var fullWidth = window.innerWidth;

Cependant, ce n'est pas supportée par tous les navigateurs, donc, comme alternative, vous pouvez utiliser docWidth comme ci-dessus, et ajouter sur la barre de défilement de la largeur.

Source: MDN

Answer 3

Voici quelques exemples qui supposent que $element est un élément jQuery :

 // Element width including overflow (scrollbar)
$element[0].offsetWidth; // 1280 in your case

// Element width excluding overflow (scrollbar)
$element[0].clientWidth; // 1280 - scrollbarWidth

// Scrollbar width
$element[0].offsetWidth - $element[0].clientWidth; // 0 if no scrollbar
 

Answer 4

Essaye ça :

         $('body, html').css('overflow', 'hidden');
        var screenWidth1 = $(window).width();
        $('body, html').css('overflow', 'visible');
        var screenWidth2 = $(window).width();
        alert(screenWidth1); // Gives the screenwith without scrollbar
        alert(screenWidth2); // Gives the screenwith including scrollbar
 

Vous pouvez obtenir l'écran avec ou sans barre de défilement en utilisant ce code. Ici, j'ai changé le débordement du corps et obtenir la largeur avec et sans la barre de défilement.

Answer 5

Avez-vous essayé la largeur du document entier:

 $(document).width();
 

Ou que dire de la largeur de la fenêtre visible:

 $(window).width();
 

Ou clientwidth javascript (très vieux navigateurs IE):

 document.body.clientWidth;
 

Ou renvoyer une valeur css:

 $('body').css('width');
 

Vous pouvez trouver ce que les différents navigateurs supportent ici: http://www.quirksmode.org/dom/w3c_cssom.html