JavaScript/Screen/width

Die Eigenschaft width speichert die absolut verfügbare Breite des Anwenderbildschirms in Pixeln, besser bekannt als Breite der Bildschirmauflösung.

Syntax

breite = Screen.width;

Beachten Sie: Der Internet Explorer skaliert die Breite mit der Zoomstufe, d. h. aus 1024 Pixeln bei 100% werden 931 Pixel bei 110%.

Anwendungsbeispiel

Zum Berechnen der Viewport- und Geräteabmessungen gibt es verschiedene Eigenschaften:

Viewportabmessungen ansehen …

document.addEventListener("DOMContentLoaded", function () {

  document.addEventListener('resize',messen);
  messen();

  function messen() { 
    document.getElementById('clientW').textContent = document.querySelector('html').clientWidth;
    document.getElementById('innerW').textContent = window.innerWidth;
    document.getElementById('outerW').textContent = window.outerWidth;
    document.getElementById('clientH').textContent = document.querySelector('html').clientHeight;
    document.getElementById('innerH').textContent = window.innerHeight;
    document.getElementById('outerH').textContent = window.outerHeight;	
    document.getElementById('screenW').textContent = screen.width;
    document.getElementById('availW').textContent = screen.availWidth;
    document.getElementById('screenH').textContent = screen.height;
    document.getElementById('availH').textContent = screen.availHeight;		
  }

});

Sowohl beim Laden, als auch bei einer Änderung des Viewports, wenn das resize-Event gefeuert wird, wird die Funktion messen aufgerufen.

In ihr werden die diversen Eigenschaften ermittelt und mit textContent in die passenden span-Elemente geschrieben.

Window.innerWidth und Window.innerHeight ermitteln die verfügbare Breite und Höhe des Viewports, während Window.outerWidth und Window.outerHeight eventuell vorhandene Scrollbars mitberechnen.

Screen.width und Screen.height ermitteln die Breite und Höhe des Bildschirms, während Screen.availWidth und Screen.availHeight die tatsächlich verfügbaren Maße ermitteln, indem sie vorhandene Taskbars abziehen.

Beachte: In diesem Beispiel wird das Event jedes Mal gefeuert, wenn das Fenster in der Größe verändert wird, und zwar bei jeder Pixelvergrößerung/-verkleinerung! Dies kann zu enormen Leistungsproblemen führen, wenn die Funktion des Ereignis-Listeners zu langsam ist.
Verwende entweder einen resizeObserver oder Window.matchMedia(), um deine Scripte effizienter laufen zu lassen!

Siehe auch

• JavaScript und CSS/CSS-Eigenschaften auslesen
  auf Veränderungen reagieren

Obsolet: Ermitteln von Breakpoints

Früher wurde mit Screen.width die Bildschirmbreite der Geräteabmessung ermittelt, um dann alternative Inhalte (die dann entsprechend fest positioniert waren) auszuliefern.

Beispiel

      location.href = screen.width >= 1024 ? 'datei1.html' : 'datei2.html';

Das Beispiel fragt mittels des ternären Operators ab, ob die verfügbare Bildschirmbreite größer oder gleich 1024 ist. Wenn ja, wird automatisch datei1.html geladen, wenn nicht, die Bildschirmbreite also kleiner ist, wird datei2.html geladen.

Dieses Beispiel geht von der oft falschen Prämisse aus, das Nutzer kleinerer Bildschirme nicht alle Inhalte sehen wollen. Diese Inhalte konnten in den verschiedenen Dateien entsprechend der Breakpoints mit festen Seitenbreiten und absoluten Positionierungen dargestellt werden.

Heutzutage verzichtet man nach den Regeln des responsiven Webdesigns auf feste Seitenbreiten und Positionierungen. Alternative Darstellungen können mittels media queries festgelegt werden.

Weblinks

• CSSWG: width
• MDN: Screen.width