"Auflösungsweiche": Weiterleitung in Abhängigkeit der Fenstergröße

SELFHTML aktuell Artikel JavaScript
	"Auflösungsweiche": Weiterleitung in Abhängigkeit der Fenstergröße
	Christian Seiler Hinweise zum Thema Beispiel mit Erläuterungen Weiterführende Links

Christian Seiler

E-Mail:	christian.seiler@selfhtml.org
Homepage-URL:	http://www.christian-seiler.de/

Bei Fragen zu diesem Beitrag bitte den Autor des Beitrags kontaktieren!

HTML besitzt ein sehr interessantes Feature: Es passt sich automatisch an die Breite des Browserfensters an. Im Idealfall schreibt man eine HTML-Seite und sie wird bei so gut wie jeder Fenstergröße gut funktionieren. Bei einigen Websites ist das Anpassen an das Browserfenster jedoch nicht möglich, da der HTML-Seite durch diverse technische Mittel eine feste Breite gegeben wird. Dies geschieht meistens auf Grund von bestimmten Anforderungen von Chefs, auf die der Webdesigner, der von der Skalierbarkeit von HTML weiß, keinen Einfluss hat. In so einem Fall werden dann mehrere Versionen der Website geschrieben, die für verschiedene Größen optimiert sind. Nun stehen Webdesigner vor dem Problem, beim anfänglichen Besuch der Website den Besucher automatisch auf die für ihn richtige Version weiterzuleiten. Dies ist selbstverständlich nur mit einer clientseitigen Scriptsprache möglich, und die einzige clientseitige Scriptsprache, die sich etabliert hat, ist JavaScript.

Im Internet findet man massenhaft sogenannte Auflösungsweichen, die in Abhängigkeit von der Bildschirmbreite (screen.width) weiterleiten. Die Bildschirmauflösung sagt jedoch gar nichts über die tatsächliche Größe des Browserfensters oder gar der tatsächlichen Größe des Anzeigebereichs aus. Hier soll nun eine flexible Lösung vorgestellt werden, die in Abhängigkeit des zur Verfügung stehenden Anzeigebereichs weiterleitet. Somit wird ein viel exakteres Ergebnis erzielt, als durch das Auslesen der Breite des Bildschirms.

Beispiel mit Erläuterungen

Beispiel

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Weiterleitung in Abhängigkeit der Browserfenstergröße</title>
  <style type="text/css">
    html, body { margin: 0; padding: 0; }
  </style>
  <script type="text/javascript" src="fenstergroesse.js"></script>
</head>
<body onload="weiterleitung_fensterbreite ('beispiel1_unbekannt.htm', 600, 'beispiel1_600.htm', 750, 'beispiel1_750.htm', 1000, 'beispiel1_1000.htm');">
<noscript>
<p>Sie haben JavaScript deaktiviert, daher konnte die Größe ihres Browserfensters nicht automatisch bestimmt werden.
Wählen Sie daher bitte aus, für welche Fenstergröße Sie die Webseite anzeigen lassen wollen:</p>
<ul>
  <li><a href="beispiel1_600.htm">600 Pixel breite</a> (typisch für die Auflösung 640 mal 480)</li>
  <li><a href="beispiel1_750.htm">750 Pixel breite</a> (typisch für die Auflösung 800 mal 600)</li>
  <li><a href="beispiel1_1000.htm">1000 Pixel breite</a> (typisch für die Auflösung 1024 mal 768)</li>
</ul>
</noscript>
</body>
</html>

Erläuterung:

Im Kopfteil der Seite wird als erstes ein Stylesheet definiert. Dieses Stylesheet bewirkt, dass die HTML-Seite keine Seitenränder produziert. Dies ist für den Internet Explorer wichtig, denn dieser zieht sonst die Seitenränder von der zur Verfügung stehenden Breite beziehungsweise Höhe ab.

Als nächstes wird die JavaScript-Datei fenstergroesse.js eingebunden. Diese stellt zwei Funktionen bereit, weiterleitung_fensterbreite und weiterleitung_fensterhoehe. Die erste Funktion leitet nach der Breite des zur Verfügung stehenden Anzeigebereichs, die zweite nach der Höhe des zur Verfügung stehenden Anzeigebereichs weiter. Hierzu wird für Netscape ab 4, Mozilla, Opera ab 5 und Konqueror die window.innerWidth beziehungsweise die window.innerHeight-Eigenschaft verwendet. Diese enthalten nämlich genau die Breite und die Höhe des zur Verfügung stehenden Anzeigebereichs. Für den Internet Explorer muss die Eigenschaft document.body.offsetWidth respektive document.body.offsetHeight verwendet werden, da dieser window.innerWidth/window.innerHeight nicht kennt. Falls ein Browser keine der beiden Eigenschaften unterstützt, so wird er auf eine Standardseite weitergeleitet.

Im onload-Eventhandler wird nun die Funktion weiterleitung_fensterbreite aufgerufen. Als erster Parameter wird die Seite erwartet, die geladen werden soll, falls die Auflösung nicht feststellbar ist. Dies kann entweder eine Auswahlseite sein, oder es kann auch die Seite, die für die häufigste Auflösung optimiert ist, sein. Als weitere Parameter erwartet die Funktion immer Zweiergruppen. Der erste Parameter einer Zweiergruppe ist die Mindestbreite, die erforderlich ist, damit diese Version genommen wird. Der zweite Parameter einer Zweiergruppe ist die Seite, auf die weitergeleitet werden soll. Im obigen Beispiel wird also auf die Seite beispiel1_unbekannt.htm (1. Parameter) weitergeleitet, falls die Breite nicht feststellbar oder zu klein ist. Hier wäre natürlich auch eine Seite mit einer Auswahl möglich. Falls die Breite mindestens 600 Pixel ist (2. Parameter), wird auf die Seite beispiel1_600.htm (3. Parameter) weitergeleitet, falls die Breite mindestens 750 Pixel ist (4. Parameter), wird auf die Seite beispiel1_750.htm (5. Parameter) weitergeleitet, und falls die Breite mindestens 1000 Pixel ist (6. Parameter), wird auf die Seite beispiel1_1000.htm (7. Parameter) weitergeleitet.

Im <noscript>-Bereich der Seite wird eine Auswahl an möglichen Versionen der Webseite gegeben, damit der Besucher die passende selbst auswählen kann, falls JavaScript deaktiviert sein sollte.

Die Funktion weitereleitung_fensterhoehe, die auch in der JavaScript-Datei enthalten ist, funktioniert analog, falls einmal ein Weiterleiten nach der zur Verfügung stehenden Höhe nötig sein sollte.

Alle Dateien inklusive des Beispiels sind im Archiv fenstergroesse.zip enthalten.

Beachten Sie:

Einige Besucher, die die Auswahl im <noscript>-Bereich sehen, werden nicht wissen wie breit ihre zur Verfügung stehende Anzeigefläche ist. Daher wäre es unter Umständen sinnvoll, eine sehr breite Graphik einzubinden, mit Hilfe derer sie erkennen können, wie groß ihr Fenster ist. Ein zusätzlicher Hinweistext mit Hilfestellung sollte auch vorhanden sein.

Da wegen des Internet Explorers die Seitenränder auf 0 gesetzt sind, kann die Anzeige im <noscript>-Bereich eventuell unschön sein, da der Text direkt am Browserfensterrand klebt. In diesem Fall sollte der Inhalt dieses Bereichs in ein <div style="padding: 5px;"> eingeschlossen werden:

<noscript><div style="padding: 5px;">
...
</div></noscript>

Der Wert für padding kann dann angepasst werden, bis das gewünschte Ergebnis erzielt wird.

Weiterführende Links

Die folgenden Stellen werden empfohlen, um das obige Beispiel besser zu verstehen, oder um weitere Möglichkeiten und Details zu erfahren.

SELFHTML: JavaScript / Objekt-Referenz / window / innerHeight
SELFHTML: JavaScript / Objekt-Referenz / window / innerWidth