Wie erhalte ich die Browserbreite mit JavaScript-Code?

180

Ich versuche, eine JavaScript-Funktion zu schreiben, um die aktuelle Browserbreite zu erhalten.

Ich habe diesen gefunden:

javascript:alert(document.body.offsetWidth);

Aber sein Problem, dass es versagt, wenn der Körper eine Breite von 100% hat.

Gibt es eine andere bessere Funktion oder eine Problemumgehung?

javascript jquery html css Amr Elgarhy
quelle

Antworten:

133

Update für 2017

Meine ursprüngliche Antwort wurde 2009 geschrieben. Während es noch funktioniert, möchte ich es für 2017 aktualisieren. Browser können sich immer noch anders verhalten. Ich vertraue darauf, dass das jQuery-Team hervorragende Arbeit bei der Aufrechterhaltung der browserübergreifenden Konsistenz leistet. Es ist jedoch nicht erforderlich, die gesamte Bibliothek einzuschließen. In der jQuery-Quelle befindet sich der relevante Teil in Zeile 37 von dimensions.js . Hier wird es extrahiert und geändert, um eigenständig zu arbeiten:

function getWidth() {
  return Math.max(
    document.body.scrollWidth,
    document.documentElement.scrollWidth,
    document.body.offsetWidth,
    document.documentElement.offsetWidth,
    document.documentElement.clientWidth
  );
}

function getHeight() {
  return Math.max(
    document.body.scrollHeight,
    document.documentElement.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.offsetHeight,
    document.documentElement.clientHeight
  );
}

console.log('Width:  ' +  getWidth() );
console.log('Height: ' + getHeight() );
Erweitern Sie das Snippet

Ursprüngliche Antwort

Da sich alle Browser unterschiedlich verhalten, müssen Sie zuerst nach Werten suchen und dann den richtigen verwenden. Hier ist eine Funktion, die dies für Sie erledigt:

function getWidth() {
  if (self.innerWidth) {
    return self.innerWidth;
  }

  if (document.documentElement && document.documentElement.clientWidth) {
    return document.documentElement.clientWidth;
  }

  if (document.body) {
    return document.body.clientWidth;
  }
}

und ähnlich für die Höhe:

function getHeight() {
  if (self.innerHeight) {
    return self.innerHeight;
  }

  if (document.documentElement && document.documentElement.clientHeight) {
    return document.documentElement.clientHeight;
  }

  if (document.body) {
    return document.body.clientHeight;
  }
}

Rufen Sie beide in Ihren Skripten mit getWidth()oder auf getHeight(). Wenn keine der nativen Eigenschaften des Browsers definiert ist, wird dieser zurückgegeben undefined.

Travis
quelle
11
Beste Antwort, weil ich keine 33k-Bibliothek für eine einfache Weiterleitung basierend auf der Breite des Browserfensters hinzufügen muss
David Aguirre
1
Dies führt zu den richtigen (oder erwarteten) Ergebnissen im Vergleich zur Implementierung von jQuery.
Emmanuel John
3
... jedes dieser drei zeigt ein Ergebnis und alle Ergebnisse (Breiten) sind unterschiedlich. Siehe zum Beispiel mit Google Chrome self.innerWidth 423, document.documentElement.clientWidth 326und document.body.clientWidth 406. In diesem Fall Frage: Was ist richtig und welches zu verwenden? Zum Beispiel möchte ich die Größe von Google Map ändern. 326 oder 423 großer Unterschied. Wenn die Breite ~ 700 ist, dann siehe 759, 735, 742 (nicht so großer Unterschied)
Andris
1
@ user2118559 var pageWidth = Math.max(self.innerWidth || 0, document.documentElement.clientWidth || 0, document.body.clientWidth || 0);und var windowWidth = self.innerWidth || -1;// wegen "body" oder "screen" oder "document" sind nicht das "Fenster", wenn Sie einen überfüllten HTML-Inhalt überprüfen, den Sie verstehen können. # i.stack.imgur.com/6xPdH.png
Abdullah Aydın
1
kopieren und einfügen Fehler in Ihrem Beispiel Funktion getWidth()Referenzenself.innerHeight
theGecko
309

Es ist ein Schmerz im Arsch . Ich empfehle, den Unsinn zu überspringen und jQuery zu verwenden , damit Sie es einfach tun können $(window).width().

Chaos
quelle
2
Wenn ich mich richtig erinnere, hat jQuery viele Dimensionen in den Kern gezogen. Benötigen Sie noch Dimensionen, um das zu tun, was Sie vorschlagen?
Nosredna
Es stellt sich heraus, dass Sie es nicht tun. Welches ist fantastisch. Bearbeitete Antwort per. Danke für die Warnung.
Chaos
6
Die Unterstützung von $ (window) .width () in jQuery ist seit Version 1.2, falls sie für irgendjemanden relevant ist.
Chaos
18
Ich habe festgestellt, dass $ (window) .width () nicht immer den gleichen Wert wie innerWidth / clientWidth zurückgibt, wie in den Beispielen in der Antwort unten angegeben. Die Version von jQuery berücksichtigt keine Browser-Bildlaufleisten (in FF sowieso). Dies führte zu großer Verwirrung bei CSS @ media-Abfragen, die anscheinend in der falschen Breite ausgelöst wurden. Die Verwendung von nativem Code scheint zuverlässiger zu sein, da das Erscheinungsbild der Bildlaufleisten berücksichtigt wird.
Coder
5
Das Hinzufügen von 30.000 Codezeilen, um die Fensterbreite zu erhalten, ist eine schlechte Lösung!
Codechimp
49 
var w = window.innerWidth;
var h = window.innerHeight;
var ow = window.outerWidth; //including toolbars and status bar etc.
var oh = window.outerHeight;

Beide geben Ganzzahlen zurück und erfordern keine jQuery. Browserübergreifend kompatibel.

Ich finde oft, dass jQuery ungültige Werte für width () und height () zurückgibt.

Bradley Flood
quelle
1
Probleme mit der Verwendung auf dem Safari iPhone.
Nu Everest
17

Warum erwähnt niemand matchMedia?

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
} else {
  /* the viewport is less than 400 pixels wide */
}

Habe nicht so viel getestet, aber mit Android Standard und Android Chrome Browsern, Desktop Chrome getestet, bis jetzt sieht es so aus, als ob es gut funktioniert.

Natürlich gibt es keinen Zahlenwert zurück, sondern einen Booleschen Wert - ob übereinstimmt oder nicht, passt also möglicherweise nicht genau zur Frage, aber das wollen wir trotzdem und wahrscheinlich will der Autor der Frage.

Darius.V
quelle
1
Unterstützt nur IE10 +.
Qarthandso
17
Wenn sie IE9 oder älter verwenden, verdienen sie das Internet nicht.
Darius.V
Safari iPhone scheint dies nicht zu unterstützen.
Nu Everest
Neuere iOS Safari-Versionen sollten matchMedia unterstützen. Quelle: caniuse.com/#feat=matchmedia
Vargr
8

Von W3schools und seinem Cross-Browser zurück in die dunklen Zeiten des IE!

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";

alert("Browser inner window width: " + w + ", height: " + h + ".");

</script>

</body>
</html>
user3651121
quelle
Der Ansatz funktioniert wunderbar und könnte die akzeptierte Antwort sein, da er viel kürzer ist als jede andere Lösung (abgesehen von der Verwendung von jQuery).
Simon Steinberger
2
Wird es keinen Fehler geben, wenn document.documentElement undefiniert ist?
PhiLho
6

Hier ist eine kürzere Version der oben dargestellten Funktion:

function getWidth() {
    if (self.innerWidth) {
       return self.innerWidth;
    }
    else if (document.documentElement && document.documentElement.clientHeight){
        return document.documentElement.clientWidth;
    }
    else if (document.body) {
        return document.body.clientWidth;
    }
    return 0;
}
Ismael
quelle
4
Was keinen Wert zurückgibt, wenn alle Bedingungen falsch sind.
Mike C
10
Du brauchst die anderen nicht :)
Nick
0

Eine angepasste Lösung für die Antwort von JS of Travis:

const getPageWidth = () => {
  const bodyMax = document.body
    ? Math.max(document.body.scrollWidth, document.body.offsetWidth)
    : 0;

  const docElementMax = document.documentElement
    ? Math.max(
        document.documentElement.scrollWidth,
        document.documentElement.offsetWidth,
        document.documentElement.clientWidth
      )
    : 0;

  return Math.max(bodyMax, docElementMax);
};
Sergiu
quelle
0

Eine wichtige Ergänzung zu Travis 'Antwort; Sie müssen getWidth () in Ihren Dokumentkörper einfügen, um sicherzustellen, dass die Breite der Bildlaufleiste gezählt wird. Andernfalls wird die Breite der Bildlaufleiste des Browsers von getWidth () abgezogen. Was ich getan habe ;

<body>
<script>
function getWidth(){
return Math.max(document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth);
}
var aWidth=getWidth();
</script>
</body>

und rufen Sie danach irgendwo eine aWidth-Variable auf.

burkul
quelle