Wie kann JavaScript die Abmessungen des Browser-Ansichtsfensters genau bestimmen?

Abmessungen des Browser-Ansichtsbereichs mit JavaScript ermitteln

Das Erkennen der Größe des Browser-Ansichtsbereichs des Benutzers ist für die Bereitstellung optimaler Inhaltserlebnisse von entscheidender Bedeutung. Wenn Sie die Größe des Ansichtsfensters kennen, können Websites qualitativ hochwertige Bilder anzeigen und Layouts basierend auf Geräteeinschränkungen anpassen. JavaScript bietet eine Reihe von Techniken zur Bestimmung der Darstellungsfensterabmessungen.

Browserübergreifende @media- und @media-Werte

Für browserübergreifende Kompatibilität können Sie CSS @ verwenden. Medienregeln zum Erhalten von Ansichtsfensterabmessungen:

let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
let vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)

window.innerWidth und window.innerHeight

Diese Eigenschaften geben die Breite und Höhe des Ansichtsfensters zurück, einschließlich Bildlaufleisten:

• Ruft die CSS-Ansichtsfensterabmessungen ab.
• Kann ungenaue Werte liefern Mobilgeräte aufgrund der Skalierung.
• Zoomanpassungen können zu 1 Pixel führen Offset.
• Nicht unterstützt von IE8 oder früher.

document.documentElement.clientWidth und .clientHeight

Diese Eigenschaften geben die Breite des Ansichtsfensters an und Höhe minus der Bildlaufleistenbreite:

• Entspricht @media-Werten wenn keine Bildlaufleiste vorhanden ist.
• Entspricht dem Fensterbreitenwert von jQuery.
• Browserübergreifend verfügbar.
• Kann ungenau sein, wenn die DOCTYPE-Deklaration fehlt.

Zusätzlich Ressourcen

• Live-Ansichtsfenster-Dimensionsausgaben: [Link]
• Verge.js (browserübergreifende Ansichtsfenstertechniken): [Link]
• Actual.js (genaue Abmessungen des Ansichtsfensters in jeder Einheit): [Link]

Das obige ist der detaillierte Inhalt vonWie kann JavaScript die Abmessungen des Browser-Ansichtsfensters genau bestimmen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!