Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

JavaScript/Screen/availHeight

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft Screen.availHeight speichert die maximal verfügbare Bildschirmhöhe in Pixeln, die eine Anwendung im Vollbildmodus einnehmen kann.

  • JavaScript 1.2
  • Chrome
  • IE
  • Firefox
  • Opera
  • Safari
  • Nur Lesen / Read Only

Syntax

hoehe = Screen.availHeight;

Unterscheidet sich von Screen.height, wenn feste Bildschirmelemente wie immer eingeblendete Taskleisten usw. einen Teil des Bildschirms oben oder unten einnehmen. Während height dann beispielsweise 768 liefert, gibt availHeight z.B. nur 712 aus, weil eine Taskleiste 56 Pixel Höhe einnimmt.

Anwendungsbeispiel[Bearbeiten]

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.

Weblinks[Bearbeiten]