Server- und clientseitige Redirects: Umleitung auf mobile Seite

Browser-Weiterleitung auf mobile Seite mit Bestätigung

Übersicht / Seite - Weiterleitungen:

per Meta-Tag (allgemeine Infos zur Benutzung)
per JavaScript (clientseitige Redirects mit JavaScript)
auf mobile Seiten (eine einfache Umleitung auf mobile Seiten)
mit Bestätigung (Pseudo-Weiterleitung auf mobile Seite mit Bestätigung)
mit PHP (serverseitige Redirects mit PHP)
per htaccess (mit mod_alias und mod_rewrite)
mit mod_rewrite (weitere Beispiele von Weiterleitungen per htaccess)
URL-Rewriting (Umschreibung von URLs mit oder ohne QueryStrings)
Weiterleitung statt 404 (... bei fehlerhaften Aufrufen oder von alten URLs)

Weiterleitungen auf mobile Seiten

Die zunehmende Verbreitung von mobilen Endgeräten stellt für den einzelnen Webmaster eine mehr oder weniger große Herausforderung dar. Eine Herausforderung, der einige unter ihnen zuweilen etwas hilflos gegenüber stehen. Aus diesem Grunde ein kleiner Tipp an dieser Stelle. Praktisch bei allen Webprojekten sollte zuerst geklärt werden, ob es zwingend erforderlich ist, von einer Webseite zwei Versionen anzulegen. Bei sehr vielen Webprojekten genügt bereits die strikte Trennung von Content und Styles, um dann mit Hilfe von CSS Media Queries die Seiten passend zu den benutzten Endgeräten zu formatieren. Doch nicht in jedem Fall ist es damit getan und eine Weiterleitung von einer Version auf eine andere Version wird erforderlich.
Prinzipiell gibt es zwei unterschiedliche Ansätze für die Erkennung von mobilen Endgeräten. So finden sich Lösungen, mit denen mit Hilfe von PHP oder JavaScript die User Agents abgefragt und ausgewertet werden. Ein Problem bei dieser Variante ist, dass eine stets aktuelle Liste aller möglichen User Agents benötigt wird. Der zweite, nachfolgend beschriebene Lösungsansatz ist hingegen einfacher, da unabhängig von User Agents und zu aktualisierenden Listen.

Kleine Anmerkung: Völlig gleich, welcher Variante aus welchen Gründen auch immer der Vorzug gegeben wird, ein Wechsel zwischen der mobilen und der Desktop-Version sollte zusätzlich noch über gewöhnliche Menüeinträge ermöglicht werden, damit ein User nicht entgegen seinem Wunsch bei einer Version hängen bleibt.

Beispiele und Listings: Im ersten und allen nachfolgenden Beispielen auf dieser Seite, wird mit Hilfe von JavaScript die Weite des Screen-Objektes ausgelesen und eine Umleitung erfolgt nur, wenn die maximale Weite des Monitors oder Displays weniger als 480 Pixel beträgt, wobei dieser Wert beliebig geändert und angepasst werden kann.

Erstes Beispiel:

Liegen alle Seiten eines Webprojektes unter demselben Pfadnamen in zwei Versionen unter unterschiedlichen Domains für den User bereit, empfiehlt sich die Übernahme des kompletten Pfades. Mit Pfad ist in diesem Zusammenhang der Teil der URL (Uniform Resource Locator) hinter der TLD (Top-Level-Domain) gemeint.

Zweites Beispiel mit Übernahme des jeweiligen Pfades:

Die Übernahme des Pfades ist dann sinnvoll, wenn seite-xy.html sowohl unter www.example.net als auch unter mobile.example.net erreichbar ist, nur in einer anderen (mobilen) Version.

Pseudo-Weiterleitung auf mobile Seite mit Bestätigung

Eine automatische Weiterleitung ist mit dem Mangel behaftet, dass ein User nicht von sich aus entscheiden kann, mit welcher Version er vorlieb nehmen möchte. Dieser Mangel ließe sich ausschließen, wenn für die Umleitung eine Funktion geschrieben würde, welche der User erst mit einem Klick als Bestätigung aufrufen könnte. Nur bleibt es sich praktisch gleich, ob der User mit einem Klick eine Funktion aufruft, welche einen Redirect auslöst oder ob er gleich einem Linkverweis zur mobilen Version folgen kann.

Da es sich dabei lediglich um einen Link, jedoch um keine automatische Um- oder Weiterleitung handelt, wurde als Titel für diesen Absatz der Begriff Pseudo-Weiterleitung gewählt.

Weiterleitung zur mobilen Seite mit einem Link zur Bestätigung:

<script type="text/javascript"><!--

var derpfad = escape(window.location.pathname);

if (screen.width < 480) {

    if ((typeof derpfad) != "undefined") {

    document.write("<a href='http://www.mobile.example.com"+derpfad+"'>Mobile Version<\/a>");
    }
    else {document.write("<a href='http://www.mobile.example.com/'>Mobile Version<\/a>");
    }
}
//-->
</script>

Doch auch diese Version hat ihre Mängel, wobei der größte Mangel wohl darin besteht, dass der User einen entsprechenden Hinweis mit Link zu oft angezeigt bekommen könnte. Um diesen Mangel zu beseitigen, könnte, wie im folgenden Listing, ein Cookie mit einer Verfallszeit von einer Stunde abgelegt werden.
Einige Bemerkungen zum Listing. Durch eine entsprechende CSS Formatierung wird erreicht, dass ein kleiner Hinweis mit Link im gut sichtbaren Bereich ausgegeben wird, jedoch nur dann, wenn die Weite des Screens weniger als 480 Pixel beträgt und noch kein Cookie mit dem Namen "wartezeit" und dem Wert "mobile" vorhanden ist. Da dieses Cookie erst beim ersten Aufruf gesetzt und nach einer Stunde wieder verfällt, so erscheint der Hinweis nur beim ersten Aufruf und danach jede Stunde maximal einmal.
Erwähnenswert ist weiterhin, dass die Verfallszeit des Cookies in Millisekunden anzugeben ist (in diesem Fall 60 x 60.000 Millisekunden) und dass das Datumsobjekt mit toGMTString() ins UTC (Universal Time Coordinated) Format umgewandelt werden muss.

Manuelle Weiterleitung mit Bestätigung und Cookie-Abfrage:

<!DOCTYPE html>
<html>

<head>
<title>Umleitung mit Bestätigung</title>
<meta charset="windows-1252">
<style type="text/css">
#wmsb {text-align:center}
#mobi {position:absolute; text-align:center; background-color:#f4ebc2; border: 1px solid #844512;
left:45%; top:40%; width:140px; height:100px; z-index:90;
}
a.mobile:link    {background-color:#e67700; text-decoration:none; color:#ffeedd; border:1px solid #844512; padding:4px}
a.mobile:visited {background-color:#e67700; text-decoration:none; color:#ffeedd; border:1px solid #844512; padding:4px}
a.mobile:hover   {background-color:#e67700; text-decoration:none; color:#4d2905; border:1px solid #844512; padding:4px}
a.mobile:active  {background-color:#e67700; text-decoration:none; color:#4d2905; border:1px solid #844512; padding:4px}
</style>
</head>

<body>
<div id="wmsb">
<h1>Umleitung mit Bestätigung</h1>
<p>Der Inhalt von dieser Seite</p>

<script type="text/javascript"><!--

var derpfad = escape(window.location.pathname);
var mobiles = new Date();
var pruefen = /^wartezeit(.+)mobile$/;

if (screen.width < 480 && pruefen.test(document.cookie) != true) {

mobiles.setTime(mobiles.getTime() + (60 * 60000));
document.cookie = "wartezeit = mobile; expires=" + mobiles.toGMTString();

     if ((typeof derpfad) != "undefined") {

     document.write("<div id=\"mobi\"><p>Bitte wechseln!<br><br>"
     +"<a class=\"mobile\" href=\"http://www.mobile.example.net"+derpfad+"\">Mobile Version<\/a><\/p><\/div>");
     }

     else {document.write("<div id=\"mobi\"><p>Bitte wechseln!<br><br>"
     +"<a class=\"mobile\" href=\"http://www.mobile.example.net/\">Mobile Version<\/a><\/p><\/div>");
     }
}
//-->
</script>
</div>
</body>
</html>

Anstelle eines einfachen Cookies lässt sich mit PHP eine Session initialisieren. Gegenüber einer festgelegten Zeitspanne besteht der Vorteil darin, dass die Abfrage während jeder Browser-Sitzung nur einmal erfolgen würde, unabhängig von der Dauer der Sitzung. Um JavaScript mit PHP auszugeben, müssen alle doppelten Anführungszeichen maskiert werden. Im Normalfall braucht ini_set() nicht verwendet zu werden, da die Standard- Konfiguration des Apache Servers bereits 0 ist. Diese Zeile könnte somit entfallen.

Code-Listing mit Session-Variablen:

<?php
ini_set("session.use_trans_sid", "0");
session_start();
?>
<!DOCTYPE html>
<html>

<head>
<title>Weiterleitung mit Bestätigung</title>
<meta charset="windows-1252">
<style type="text/css">
#wmsb {text-align:center}
#mobi {position:absolute; text-align:center; background-color:#f4ebc2; border: 1px solid #844512;
left:45%; top:40%; width:140px; height:100px; z-index:90;
}
a.mobile:link    {background-color:#e67700; text-decoration:none; color:#ffeedd; border:1px solid #844512; padding:4px}
a.mobile:visited {background-color:#e67700; text-decoration:none; color:#ffeedd; border:1px solid #844512; padding:4px}
a.mobile:hover   {background-color:#e67700; text-decoration:none; color:#4d2905; border:1px solid #844512; padding:4px}
a.mobile:active  {background-color:#e67700; text-decoration:none; color:#4d2905; border:1px solid #844512; padding:4px}
</style>
</head>

<body>
<div id="wmsb">
<h1>Weiterleitung mit Bestätigung</h1>
<p>Der Content dieser Seite</p>

<?php

if(!isset($_SESSION["wartezeit"]) or $_SESSION["wartezeit"] != "mobile") {

$_SESSION["wartezeit"] = "mobile";

echo "<script type=\"text/javascript\"><!--\n\n".
     "var derpfad = escape(window.location.pathname);\n\n".
     "if (screen.width < 480) {\n\n".
     "\tif ((typeof derpfad) != \"undefined\") {\n\n".
     "\tdocument.write(\"<div id='mobi'><p>Bitte wechseln!<br><br>".
     "<a class='mobile' href='http://www.mobile.example.net\"+derpfad+\"'>Mobile Version<\/a><\/p><\/div>\");\n".
     "\t}\n".
     "\telse {document.write(\"<div id='mobi'><p>Bitte wechseln!<br><br>".
     "<a class='mobile' href='http://www.mobile.example.net/'>Mobile Version<\/a><\/p><\/div>\");\n".
     "\t}\n".
     "}\n".
     "//-->\n".
     "</script>\n";
}
?>
</div>
</body>
</html>

Beim letzten Listing könnte statt mit JavaScript und window.location.pathname ebenfalls mit PHP und der superglobalen Server-Variablen auf die Request URI zugegriffen werden, wobei $_SERVER["REQUEST_URI"] abzufragen und zu filtern wäre.

Browser-Weiterleitungen « / » mit PHP und htaccess | weitere Beispiele

Navigation

Finden und
gefunden werden ...

Planung von Websites
und Webprojekten

Zukunftsaussichten

Studien & Strategien

Verbreitung & Bedeutung

- Optimierung -

Einstieg Optimierung

Webcoding

Übersicht

Einführung ins Thema

Web Services

Web Services

Tutorials &
diverse Listings

Navigationshilfe

und vieles mehr...