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

102

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?

häufig
quelle
Benötigen Sie die vertikalen Bildlaufleisten? Oder könnten Sie Überlauf verwenden: versteckt und dann die Breite berechnen?
Filip
Sie können auf dieser Website für Ihre Frage stackoverflow.com/questions/8794338/…
Sie könnten versuchenwidth: 100%;
www139
Versuchen Sie, das Element auf die gesamte Breite des Bildschirms ohne die Bildlaufleisten einzustellen?
www139

Antworten:

161

.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 
Roko C. Buljan
quelle
2
Dies funktioniert nicht, wenn Sie aus irgendeinem Grund die Breite des Körperelements geändert haben.
Konstantin Pereiaslov
4
Es scheint, dass dies unter Chrome nicht mehr wirklich funktioniert. Die gemeldete Breite ist tatsächlich 20 Pixel größer als das Fenster selbst. Ich habe zahlreiche Breitenmessungen bisher nicht ausprobiert.
Sammaye
2
@Sammaye, weil du vergessen hast (warum?), Den Rand zu setzen: 0; zu BODY oder verwenden Sie einen allgemeinen CSS-Rücksetzcode. jsbin.com/homixuqi/2/edit . Der Code funktioniert also wieder einwandfrei .
Roko C. Buljan
2
@NamanGoel Es ist Ihre Aufgabe als Webdesigner, Messarounds mit der Körperbreite zu vermeiden. Es ist keine schwierige Aufgabe. Auch in Bezug auf die Höhe hängt es davon ab, ob Ihre bodyÜberläufe oder nicht. wenn es überläuft, als es einzuschränken.
Roko C. Buljan
2
@ RokoC.Buljan Ich bin hier nicht anderer Meinung als Sie. Natürlich sollte sich kein guter Webdesigner / Entwickler mit der Körperbreite und dem Zeug anlegen. Mein Punkt war die Verwendung der zuverlässigsten verfügbaren API. Einige Javascript-Entwickler erstellen möglicherweise Plug-Ins usw. und haben möglicherweise nicht die Kontrolle über die gesamte Seite.
Naman Goel
36

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

Joshua Bambrick
quelle
Dies gilt nicht berücksichtigt , wenn es eine Scrollbar
Jan
5
document.documentElement.clientWidthhat mir am meisten geholfen, da es auch für die Höhe funktioniert ( innerHeightkann kleiner sein, wenn der Körper die Seite nicht ausfüllt usw.) und den Wert ohne Bildlaufleiste erhält.
user4642212
1
document.documentElement.clientWidth ist der wahre Gewinner. document.body.clientWidth ist in Ordnung, es sei denn, Sie haben eine Mindestbreite für Ihr Körperelement festgelegt und der Browser ist derzeit kleiner als diese Mindestbreite.
Codemonkey
12

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
Konstantin Dinev
quelle
10

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.

mrbengi
quelle
Darauf musste ich mich auch verlassen. Die obigen Antworten haben bei mir nicht funktioniert
valerio0999
Hat mir Zeit gespart! Danke vielmals!
Xonshiz
7

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.

Naman Goel
quelle
0

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.

www139
quelle
0

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.

Homebrand
quelle
0

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