Comment obtenir la largeur de l'écran sans (moins) de la barre de défilement?

J'ai un élément et que vous avez besoin de la largeur sans(!) barre de défilement verticale.

Firebug m'indique largeur du corps est 1280px.

L'un de ces beaux travaux dans Firefox:

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

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

Ils retournent tous 1263px, qui est la valeur, je suis à la recherche d'.

Cependant tous les autres navigateur me donner 1280px.

Est-il de la croix-navigateur de façon à obtenir un plein écran largeur sans(!) barre de défilement verticale?

Avez-vous besoin de l'vertical des barres de défilement? Ou pouvez-vous utiliser overflow: hidden, puis calculer la largeur?
vous pouvez vous référer à ce site pour votre question stackoverflow.com/questions/8794338/...
vous pouvez essayer de width: 100%;
êtes-vous essayer de rendre l'élément de l'ensemble de la largeur de l'écran, pas y compris les barres de défilement?

InformationsquelleAutor frequent | 2011-12-01

149

.prop("clientWidth") et .prop("scrollWidth")
```
var actualInnerWidth = $("body").prop("clientWidth"); //El. width minus scrollbar width
var actualInnerWidth = $("body").prop("scrollWidth"); //El. width minus scrollbar width
```
dans JavaScript:
```
var actualInnerWidth = document.body.clientWidth;     //El. width minus scrollbar width
var actualInnerWidth = document.body.scrollWidth;     //El. width minus scrollbar width
```
_{P. S: Notez que pour utiliser scrollWidth de façon fiable votre élément ne doit pas de débordement à l'horizontale}

jsBin démo

Vous pouvez également utiliser .innerWidth() mais ce ne fonctionne que sur le body élément
```
var innerWidth = $('body').innerWidth(); //Width PX minus scrollbar 
```
- incroyable... $('body').innerWidth() fonctionne 🙂 MERCI!
- Cela ne fonctionnera pas si pour quelque raison vous avez changé la largeur de l'élément de corps.
- Je l'ai changé en CSS comme une partie de la conception, donc je ne pense pas que ce serait facile. Simplement en laissant tout le monde, qui peut obtenir des résultats erronés en raison de ce savoir.
- Il semble que ce n'est pas vraiment travailler sur Chrome plus, la largeur est en fait 20px plus grande que la fenêtre elle-même, j'ai essayé de nombreuses mesures de largeur de rien jusqu'à présent.
- Désolé de l'entendre, fonctionne dans Chrome pour moi.
- J'ai pensé qu'il pourrait avoir été la version de chrome, mais j'ai juste mis à jour et il arrive encore. La façon dont je suis en train de tester, j'ai une requête de média à 768 et un innerWidth mesure à 768, la JS pauses d'environ 786 selon les Chromes petite taille survolez sur ses pages. Il pourrait être mise en œuvre différences entre la JS largeur et la requête de média largeur
- Il est difficile de s'imaginer sans une démo... Pouvez-vous configurer un simple cas de test sur jsBin?
- Avait-il mauvais sens, JS est plus petite que la requête de média lors de la production de rapports, mais voici un exemple: jsbin.com/homixuqi/1 , si vous redimensionnez à 780, il va montrer 764 en JS
- c'est la cause que vous avez oublié (pourquoi?) pour définir margin:0; au CORPS ou à l'utilisation d'un commun CSS code de réinitialisation. jsbin.com/homixuqi/2/edit . Donc, encore une fois, le code fonctionne parfaitement bien.
- Ok assez juste, je pensais que bootstrap 3.1 a réinitialiser le code, mais il ne semble pas
- notez que cette méthode comprend les barre de défilement verticale de la largeur dans le calcul de la largeur, si il y a un (testé dans Chrome).
- Cela ne fonctionne pas sur Chrome Version 41.0.2272.89 m
- Ce type de travaux, mais pas pour la taille, si vous avez besoin. Aussi, ce n'est pas super fiable comme la taille du corps peut être gâché avec l'aide de CSS.
- c'est votre travail en tant que concepteur de sites web pour empêcher messarounds avec la largeur du corps. Ce n'est pas une tâche difficile. Aussi, concernant la taille ça dépend si votre body débordements ou pas. s'il déborde de les restreindre.
- Je ne suis pas en désaccord avec vous ici. Bien sûr, pas de bon web designer/développeur doit mess avec la largeur du corps et des choses. Mon point est sur l'utilisation de la plus fiable de l'API disponibles. Certains les développeurs javascript peut être bâtiment de plugins etc et peut ne pas avoir le contrôle de la totalité de la page.
- Pas de travail comme dans la version 66.0.3359.139
- le jsBin démo fonctionne assez bien (Windows Ch. 66.0.3359)
InformationsquelleAutor Roko C. Buljan
30

Vous pouvez utiliser de la vanille javascript en écrivant simplement:
```
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 un secours, vous souhaiterez peut-être utiliser docWidth comme ci-dessus, et ajouter sur le largeur de la barre de défilement.

Source: MDN
- Ce n'est pas à prendre en compte si il y a une barre de défilement
- bon point, voir modifier
- document.documentElement.clientWidth m'a aidé le plus, parce qu'il donne de la hauteur et (innerHeight peut être moindre si le corps de ne pas remplir la page, etc). et obtient la valeur sans la barre de défilement.
- document.documentElement.clientWidth est le véritable vainqueur. document.corps.clientWidth est ok, sauf si vous avez un min-width ensemble de votre corps avec de l'élément et le navigateur est actuellement plus petite que la largeur minimum.
InformationsquelleAutor Joshua Bambrick

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

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

merci. résolu pendant un certain temps, mais toujours bon à savoir.

InformationsquelleAutor Konstantin Dinev

8

Essayez ceci :
```
$('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 la largeur de l'écran par avec et sans barre de défilement à l'aide de ce code.
Ici, j'ai changé la valeur de débordement de body et obtenir la largeur avec et sans barre de défilement.
- j'ai dû compter sur cela aussi. les réponses ci-dessus ne fonctionne pas pour moi
InformationsquelleAutor mrbengi
5

L'endroit le plus sûr pour obtenir la bonne largeur et la hauteur sans les barres de défilement est à partir de l'élément HTML. Essayez ceci:
```
var width = document.documentElement.clientWidth
var height = document.documentElement.clientHeight
```
Prise en charge du navigateur est assez décent, avec IE 9 et appui. Pour les ANCIENS c'est à dire, utiliser l'une des nombreuses réserves mentionnées ici.

InformationsquelleAutor Naman Goel
0

J'ai connu un problème similaire et faire width:100%; résolu pour moi. Je suis venu à cette solution après avoir essayé une réponse à cette question et se rendre compte que la nature même d'un <iframe> fera de ces javascript outils de mesure inexacte sans recours à la fonction complexe. Fait de 100% est une façon simple de prendre soin d'elle dans un iframe. Je ne sais pas à propos de votre question car je ne suis pas sûr de ce que les éléments HTML de la manipulation.

InformationsquelleAutor www139
0

Aucune de ces solutions n'a fonctionné pour moi, cependant, j'ai été en mesure de le réparer en prenant la largeur et la soustraction de la la largeur de la barre de défilement. Je ne suis pas sûr de la façon de la croix-navigateur compatible c'est.

InformationsquelleAutor homebrand

Voici ce que j'utilise

function windowSizes(){
    var e = window,
        a = 'inner';
    if (!('innerWidth' in window)) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return {
        width: e[a + 'Width'],
        height: e[a + 'Height']
    };  
}

$(window).on('resize', function () {
    console.log( windowSizes().width,windowSizes().height );
});

InformationsquelleAutor Benn

Vous devez vous connecter pour publier un commentaire.

.prop("clientWidth") et .prop("scrollWidth")

`.prop("clientWidth")` et `.prop("scrollWidth")`