Wie erhalte ich die Bildschirmbreite ohne (Minus-) Bildlaufleiste?

Ich habe ein Element und brauche seine Breite ohne (!) Vertikale Bildlaufleiste.

Firebug sagt mir, dass die Körperbreite 1280px beträgt.

Beides funktioniert in Firefox einwandfrei:

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

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

Sie alle geben 1263px zurück , was der Wert ist, den ich suche.

Jedoch geben mir alle anderen Browser 1280px .

Gibt es eine browserübergreifende Möglichkeit, eine Vollbildbreite ohne (!) Vertikale Bildlaufleiste zu erhalten?

.prop("clientWidth") und .prop("scrollWidth")

var actualInnerWidth = $("body").prop("clientWidth"); // El. width minus scrollbar width
var actualInnerWidth = $("body").prop("scrollWidth"); // El. width minus scrollbar width

in JavaScript :

var actualInnerWidth = document.body.clientWidth;     // El. width minus scrollbar width
var actualInnerWidth = document.body.scrollWidth;     // El. width minus scrollbar width

_{PS: Beachten Sie, dass scrollWidthIhr Element zur horizontalen Verwendung nicht horizontal überlaufen sollte}

jsBin Demo

Sie können auch verwenden .innerWidth(), dies funktioniert jedoch nur für das bodyElement

var innerWidth = $('body').innerWidth(); // Width PX minus scrollbar 

Sie können Vanille-Javascript verwenden, indem Sie einfach schreiben:

var width = el.clientWidth;

Sie können dies auch verwenden, um die Breite des Dokuments wie folgt zu ermitteln:

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

Quelle: MDN

Sie können auch die Breite des gesamten Fensters einschließlich der Bildlaufleiste wie folgt abrufen:

var fullWidth = window.innerWidth;

Dies wird jedoch nicht von allen Browsern unterstützt. Als Fallback möchten Sie möglicherweise docWidthwie oben beschrieben verwenden und die Breite der Bildlaufleiste erhöhen .

Quelle: MDN

Hier einige Beispiele, bei denen davon ausgegangen $elementwird, dass es sich um ein jQueryElement handelt:

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

Versuche dies :

$('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

Mit diesem Code können Sie die Bildschirmbreite mit und ohne Bildlaufleiste ermitteln. Hier habe ich den Überlaufwert von geändert bodyund die Breite mit und ohne Bildlaufleiste erhalten.

Der sicherste Ort, um die richtige Breite und Höhe ohne die Bildlaufleisten zu erhalten, ist das HTML-Element. Versuche dies:

var width = document.documentElement.clientWidth
var height = document.documentElement.clientHeight

Die Browserunterstützung ist ziemlich anständig, IE 9 und höher unterstützen dies. Verwenden Sie für OLD IE einen der vielen hier genannten Fallbacks.

Ich habe ein ähnliches Problem erlebt und width:100%;es für mich gelöst. Ich kam zu dieser Lösung, nachdem ich eine Antwort in dieser Frage versucht hatte und festgestellt hatte, dass <iframe>diese Javascript-Messwerkzeuge aufgrund ihrer Natur ungenau sind, ohne eine komplexe Funktion zu verwenden. 100% zu tun ist eine einfache Möglichkeit, sich in einem Iframe darum zu kümmern. Ich weiß nichts über Ihr Problem, da ich nicht sicher bin, welche HTML-Elemente Sie bearbeiten.

Keine dieser Lösungen funktionierte für mich, aber ich konnte sie beheben, indem ich die Breite nahm und die Breite der Bildlaufleiste subtrahierte . Ich bin mir nicht sicher, wie browserübergreifend dies ist.

Hier ist was ich benutze

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 );
});