Wie kann ich die Browserbreite in JavaScript genau ermitteln und Randfälle behandeln?

Browserbreite mit JavaScript ermitteln, einschließlich Edge Cases

Das Abrufen der aktuellen Browserbreite mit JavaScript kann unkompliziert sein, es ist jedoch wichtig, Edge zu berücksichtigen Fällen, um genaue Messungen zu gewährleisten. Lassen Sie uns eine Lösung erkunden:

Der von Ihnen erwähnte Code zum Ermitteln der Browserbreite mithilfe von document.body.offsetWidth kann fehlschlagen, wenn für das Body-Element eine Breite von 100 % festgelegt ist. Dies liegt daran, dass sich das Körperelement ausdehnt, um den verfügbaren horizontalen Raum auszufüllen, was zu einer ungenauen Messung führt.

Um dieses Problem zu beheben, betrachten Sie die folgende Funktion:

function getBrowserWidth() {
  return Math.max(
    document.documentElement.clientWidth,
    window.innerWidth || 0
  );
}

Erklärung:

• document.documentElement.clientWidth: Dies Die Eigenschaft gibt die innere Breite des Fensters in Pixel zurück, einschließlich der vertikalen Bildlaufleistenbreite, falls vorhanden. Es enthält jedoch keine horizontalen Bildlaufleisten.
• window.innerWidth: Diese Eigenschaft gibt die innere Breite des Fensters in Pixel zurück, einschließlich etwaiger horizontaler Bildlaufleisten.

So funktioniert es:

Die Funktion wird zunächst versucht zu verwenden document.documentElement.clientWidth als bevorzugte Methode. Wenn dieser Wert nicht verfügbar ist oder 0 zurückgibt, wird auf window.innerWidth zurückgegriffen, um etwaige horizontale Bildlaufleisten zu berücksichtigen.

Vorteile:

• Redressiert den Rand Fall eines Körpers mit 100 % Breite.
• Sorgt für eine genaue Messung der Browserbreite auch bei horizontaler Ausrichtung Bildlaufleisten.

Das obige ist der detaillierte Inhalt vonWie kann ich die Browserbreite in JavaScript genau ermitteln und Randfälle behandeln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!