Wie man die Größe des Bildschirms, des Browserfensters und der Webseite selbst in JavaScript erhält?

Hallo zusammen! Ich bin ein Anfänger in JavaScript und erstelle eine responsive Website. Ich brauche, dass sich einige Elemente an die Gerätegröße des Benutzers anpassen. Aber ich bin bei den Begriffen verwirrt: Was sind screen, window und document? Und wie bekomme ich ihre genauen Maße? Zum Beispiel habe ich diesen Code geschrieben: ```javascript console.log('screen width:', screen.width); console.log('window inner width:', window.innerWidth); console.log('document width:', document.width); ``` Aber `document.width` gibt `undefined` zurück, und `screen.width` scheint nicht das zu zeigen, was ich erwarte. Ich habe einen Laptop mit Full-HD-Bildschirm (1920×1080), aber `screen.width` gibt 1536 aus und `window.innerWidth` — 1519 (bei maximiertem Fenster). Warum ist das so? Und wie bekomme ich korrekt die Breite und Höhe der Webseite selbst (inklusive Scrollen)? Ich möchte den Unterschied zwischen diesen drei Konzepten verstehen und wissen, welche Eigenschaften ich in verschiedenen Situationen verwenden soll. Ich wäre dankbar für eine ausführliche Erklärung mit Beispielen, die in allen Browsern funktionieren (Chrome, Firefox, Safari).