webentwicklung-frage-antwort-db.com.de

Wie bekomme ich die Browserbreite mit JavaScript-Code?

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

Ich habe folgendes gefunden:

javascript:alert(document.body.offsetWidth);

Aber es ist ein Problem, dass es scheitert, wenn der Körper eine Breite von 100% hat.

Gibt es eine andere bessere Funktion oder eine Problemumgehung?

170
Amr Elgarhy

Update für 2017

Meine ursprüngliche Antwort wurde 2009 geschrieben. Ich möchte sie für 2017 aktualisieren, solange sie noch funktioniert. Browser können sich immer noch anders verhalten. Ich vertraue darauf, dass das jQuery-Team bei der Wahrung der browserübergreifenden Konsistenz hervorragende Arbeit 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 modifiziert, 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() );

Ursprüngliche Antwort

Da sich alle Browser unterschiedlich verhalten, müssen Sie zuerst auf Werte prüfen 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 getHeight() auf. Wenn keine der nativen Eigenschaften des Browsers definiert ist, wird undefined zurückgegeben.

114
Travis

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

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

Beide geben ganze Zahlen zurück und erfordern kein jQuery. Browserübergreifend kompatibel.

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

47
Bradley Flood

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 getestet mit Android default und Android chrome browser, desktop chrome, so weit es aussieht wie es gut funktioniert.

Natürlich gibt es keinen Zahlenwert zurück, sondern einen Booleschen Wert - wenn dies zutrifft oder nicht, passt dies möglicherweise nicht genau zur Frage, aber genau das wollen wir trotzdem und wahrscheinlich auch der Verfasser der Frage.

14
Darius.V

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

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