Wie bekomme ich Browser-Breite mit JavaScript-Code?

Ich bin versucht, zu schreiben eine JavaScript-Funktion, um die aktuelle browser-Breite.

Fand ich dieses:

javascript:alert(document.body.offsetWidth);

Aber sein problem, dass es fehl, wenn der Körper hat die Breite 100%.

Gibt es eine andere bessere Funktion oder einen workaround?

InformationsquelleAutor der Frage Amr Elgarhy | 2009-06-24

  1. 286

    Es ist ein pain in the ass. Ich empfehle das überspringen der Unsinn und die mit jQuery, das können Sie nur tun $(window).width().

    InformationsquelleAutor der Antwort chaos

  2. 39
    var w = window.innerWidth;
var h = window.innerHeight;
var ow = window.outerWidth; //including toolbars and status bar etc.
var oh = window.outerHeight;

    Beide zurück Ganzzahlen und nicht benötigen jQuery. Cross-browser-kompatibel.

    Oft finde ich jQuery gibt Ungültiger Werte für width() und height()

    InformationsquelleAutor der Antwort Bradley Flood

  3. 11

    Warum niemand erwähnt 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 */
}

    Nicht testen, aber getestet mit der android-Standard und android-chrome-Browser, desktop-Chrom, so weit es sieht aus wie es gut funktioniert.

    Natürlich nicht wieder Nummer Wert, aber gibt boolean - wenn übereinstimmt oder nicht, so könnte nicht genau zur Frage passen, aber das ist, was wir sowieso wollen und wahrscheinlich der Autor der Frage will.

    InformationsquelleAutor der Antwort Darius.V

  4. 7

    Von W3schools und seine cross-browser-zurück zu den dunklen Zeiten der 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>

    InformationsquelleAutor der Antwort user3651121

  5. 6

    Hier ist eine kürzere version der Funktion, die oben präsentiert:

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

    InformationsquelleAutor der Antwort ismael

Schreibe einen Kommentar