SELFHTML: JavaScript / Objekt-Referenz / Screen

SELFHTML/Navigationshilfen

JavaScript/DOM

Objekt-Referenz

Screen

Allgemeines zur Verwendung

Eigenschaften:

availHeight (verfügbare Höhe)
availWidth (verfügbare Breite)
colorDepth (Farbtiefe)
height (Höhe)
pixelDepth (Farbauflösung)
width (Breite)

screen: Allgemeines zur Verwendung

Mit dem Objekt screen können Sie Angaben zum Bildschirm des Anwenders ermitteln. Diese Angaben zu kennen ist wichtig, wenn Sie professionelles "Screendesign" mit HTML und JavaScript betreiben wollen.
Das screen-Objekt ist bei Netscape und beim MS Internet Explorer ab den 4er Versionen verfügbar.

Eigenschaften des screen-Objekts können Sie direkt ansprechen, indem Sie screen davor notieren.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
<!--
 alert(screen.width + "x" + screen.height);
//-->
</script>
</head><body>
</body>
</html>

Erläuterung:

Das Beispiel gibt beim Einlesen der Datei Breite (screen.width) mal Höhe (screen.height) des Anwenderbildschirms aus. Es handelt sich dabei um die Angabe in Pixeln, Ergebnisse sind also etwa 800x600 oder 1024x768.

availHeight

Speichert die maximal verfügbare Bildschirmhöhe in Pixeln, die eine Anwendung im Vollbildmodus einnehmen kann. 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.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
<!--
 if(screen.availHeight != screen.height)
  alert("Sie sehen mehr von dieser Seite, wenn Sie die Taskleiste ausblenden");
//-->
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel vergleicht die beiden Eigenschaften screen.availHeight und screen.height. Wenn beide nicht den gleichen Wert speichern, hat der Anwender vermutlich seine Taskleiste immer im Vordergrund. Das Beispiel gibt in diesem Fall einen entsprechenden Hinweis aus.

availWidth

Speichert die maximal verfügbare Bildschirmbreite in Pixeln, die eine Anwendung im Vollbildmodus einnehmen kann. Unterscheidet sich von screen.width, wenn feste Bildschirmelemente wie immer eingeblendete Taskleisten usw. links oder rechts einen Teil des Bildschirms einnehmen. Während width dann beispielsweise 1024 liefert, gibt availWidth z.B. nur 940 aus, weil an einer Seite eine Taskleiste 84 Pixel Breite einnimmt.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
<!--
if(screen.availWidth != screen.width)
  alert("Sie haben wohl seitlich eine Taskbar!");
//-->
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel vergleicht die beiden Eigenschaften screen.availWidth und screen.width. Wenn beide nicht den gleichen Wert speichern, hat der Anwender vermutlich seine Taskleiste immer im Vordergrund. Das Beispiel gibt in diesem Fall einen entsprechenden Hinweis aus.

colorDepth

Speichert die Anzahl Bits, die der Anwenderbildschirm zur Darstellung einer Farbe an jedem Pixelpunkt des Bildschirms verwendet. Ein Wert von 16 bedeutet beispielsweise: der Bildschirm kann 2 hoch 16, also 65536 Farben darstellen. Diese Eigenschaft hat dann einen Wert, wenn der Anwenderbildschirm intern eine Farbpalette benutzt. Andernfalls wird undefined (Netscape) oder null (MS Internet Explorer) gespeichert. Bei Netscape können Sie dann die Eigenschaft pixelDepth abfragen.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
<!--
alert(Math.pow(2,screen.colorDepth));
//-->
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel ermittelt die Anzahl Farben, die der Anwenderbildschirm darstellen kann, durch Anwendung der Math-Mthode pow(). Mit Math.pow(2,screen.colorDepth) wird der Wert, den screen.colorDepth speichert, als Exponent zur Basis 2 benutzt. Das Ergebnis ist also 2 hoch screen.colorDepth.

height

Speichert die absolut verfügbare Höhe des Anwenderbildschirms in Pixeln, besser bekannt als Höhe der Bildschirmauflösung. Typische Werte sind 480, 600 und 768.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
<!--
if(screen.height >= 768)
 window.location.href = "datei1.htm"
else
 window.location.href = "datei2.htm"
//-->
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel fragt ab, ob die verfügbare Bildschirmhöhe größer oder gleich 768 ist. Wenn ja, wird automatisch datei1.htm geladen, wenn nicht (also wenn die Bildschirmhöhe kleiner ist), wird datei2.htm geladen.

pixelDepth

Speichert die Farbtiefe des Anwenderbildschirms in Bit pro Pixel. Diese Eigenschaft hat dann einen Wert, wenn der Anwenderbildschirm intern eine Farbpalette benutzt. Andernfalls wird undefined (Netscape) oder null (MS Internet Explorer) gespeichert, und Sie müssen die Eigenschaft colorDepth abfragen.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script language="JavaScript" type="text/javascript">
<!--
if(screen.pixelDepth)
 alert(screen.pixelDepth);
//-->
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel ermittelt, ob für screen.pixelDepth ein Wert verfügbar ist. Wenn ja, wird der Wert in einem Meldungsfenster ausgegeben.

width

Speichert die absolut verfügbare Breite des Anwenderbildschirms in Pixeln, besser bekannt als Breite der Bildschirmauflösung. Typische Werte sind 640, 800 und 1024.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
<!--
if(screen.width >= 1024)
 window.location.href = "datei1.htm"
else
 window.location.href = "datei2.htm"
//-->
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel fragt ab, ob die verfügbare Bildschirmbreite größer oder gleich 1024 ist. Wenn ja, wird automatisch datei1.htm geladen, wenn nicht (also wenn die Bildschirmbreite kleiner ist), wird datei2.htm geladen.


	string
	RegExp

SELFHTML/Navigationshilfen

JavaScript/DOM

Objekt-Referenz