it-swarm.com.de

Wie bekomme 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 ist.

Beides funktioniert in Firefox gut:

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

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

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

Alle anderen Browser geben mir jedoch 1280px

Gibt es einen Cross-Browser-Weg, um eine Vollbildbreite ohne (!) Vertikale Bildlaufleiste zu erhalten?

83
frequent

.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

P.S: Beachten Sie, dass Ihr Element horizontal nicht überlaufen sollte, um scrollWidth zuverlässig zu verwenden

jsBin Demo


Sie können auch .innerWidth() verwenden. Dieses funktioniert jedoch nur für das body-Element.

var innerWidth = $('body').innerWidth(); // Width PX minus scrollbar 
143
Roko C. Buljan

Sie können Vanilla Javascript verwenden, indem Sie einfach schreiben:

var width = el.clientWidth;

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

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

Quelle: MDN

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

var fullWidth = window.innerWidth;

Dies wird jedoch nicht von allen Browsern unterstützt. Als Fallback möchten Sie möglicherweise docWidth wie oben verwenden und die Bildlaufleistenbreite hinzufügen.

Quelle: MDN

29
Joshua Bambrick

Hier einige Beispiele, bei denen angenommen wird, dass $element ein jQuery-Element ist:

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

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

Sie können die Bildschirmbreite mit und ohne Bildlaufleiste erhalten, indem Sie diesen Code verwenden. Hier habe ich den Überlaufwert von body geändert und die Breite mit und ohne Bildlaufleiste erhalten.

8
HQtunes.com

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 Browser-Unterstützung ist ziemlich anständig, mit IE 9 und höher wird dies unterstützt. Verwenden Sie für ALTE IE einen der vielen hier genannten Fallbacks.

4
Naman Goel

Ich hatte ein ähnliches Problem und löste es durch width:100%; für mich. Ich kam zu dieser Lösung, nachdem ich eine Antwort in dieser Frage ausprobiert hatte und erkannte, dass die Art eines <iframe> diese Javascript-Messwerkzeuge ungenau machen wird, ohne eine komplexe Funktion zu verwenden. 100% zu tun ist eine einfache Möglichkeit, sich in einem iframe darum zu kümmern. Ich kenne Ihr Problem nicht, da ich nicht sicher bin, welche HTML-Elemente Sie bearbeiten.

0
www139

Keine dieser Lösungen funktionierte für mich, jedoch konnte ich sie beheben, indem ich die Breite nahm und die Breite der Bildlaufleiste subtrahierte. Ich bin mir nicht sicher, wie es mit dem Browser kompatibel ist.

0
homebrand

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