Browserweiche für Umleitung auf mobile- & Desktop Browser

BeRo schrieb am 25.03.2013 um 22:05 Uhr

Da sich in letzter Zeit die Anfragen zu dem Thema "Browserweiche" im Forum häufen, habe ich hier eine Kurzanleitung abgelegt, die sofort für eigene Zwecke genutzt werden kann.

Die weiter unten beschriebene Browserweiche basiert auf PHP. Der Provider, der den Webspace zur Verfügung stellt sollte PHP also unterstützen.

Die Browserweiche wurde so angelegt, dass sie den sogenannten "User Agent" (in unserem Fall den Webbrowser) des Anwenders feststellt und dann entweder die für die Browser der mobilen Geräte optimierte Seite aufruft oder, alternativ, die Seite, die für die Browser der stationären Geräte optimiert wurde.

Um die beiden Browsergruppen unterscheiden zu können, wird von der Browserweiche eine vorbereitete Tabelle "gelesen" und geprüft, ob der festgestellte User Agent in der Tabelle enthalten ist. Das ist im Grunde eine einfache ja/nein Abfrage, die eine ebenso einfache Auswertung ermöglicht.

Zur Umsetzung benötigen wir ein PHP Script, wie das folgende, das wir der Einfachheit halber "index.php" nennen.
Das Script kann mit jedem einfachen Texteditor angelegt werden, z. B. mit dem Windows "Notepad". Der u. a. Code kann dazu mit copy & paste übernommen werden und als Datei "index.php" gespeichert werden:

-------------------------------
<?php

$useragent = $_SERVER['HTTP_USER_AGENT'];
if (preg_match("/(alcatel|amoi|android|avantgo|blackberry|benq|cell|cricket|docomo|elaine
|htc|iemobile|iphone|ipad|ipaq|ipod|j2me|java|midp|mini|mmp|mobi|motorola|nec-|nokia|palm|
panasonic|philips|phone|playbook|sagem|sharp|sie-|silk|smartphone|sony|symbian|t-mobile|telus
|up\.browser|up\.link|vodafone|wap|webos|wireless|xda|xoom|zte)/i",$useragent))

{
header( 'Location: mobil.htm' );
} else {
header( 'Location: desktop.htm' );
}

?>

-------------------------------

Im o. a. Scriptcode bin ich davon ausgegangen, dass die Startseite der mobilen Website "mobil.htm" heißt (oben gelb markiert) und die Startseite der stationären Version "desktop.htm" (oben grün markiert).

Beide Seiten müssen in dem Fall im selben Verzeichnis auf dem Webserver liegen, in dem auch die Browserweiche "index.php" abgelegt wird.

Sollen die für die jeweiligen Browser optimierten Seiten in anderen Verzeichnissen-, oder gar in anderen Webspaces abgelegt werden, muss der Pfad im "Location:" Statement zusätzlich angegeben werden.

Das kann dann so aussehen, wenn die komplette URL angegeben wird:

------------------------------------
header("Location: http://www.beispiel.de/mobil.htm");
------------------------------------

Oder so, wenn die Startdatei "mobil.htm" nur in einem anderen Verzeichnis des aktuellen Webspace liegt (hier im  Verzeichnis "smartphones"):

------------------------------------
header("Location: ../smartphones/mobil.htm");
------------------------------------

Die Browserweiche "index.php" muss in jedem Fall da liegen, wo die üblicherweise genutzte URL hinzeigt. Der ursprüngliche Aufruf der Website ändert sich dann nicht! Gleichgültig, wo die Website liegt, auf die umgeleitet wurde.

Wichtig! Im Startverzeichnis (i. d. R. das root Verzeichnis des Webspace) darf keine weitere Startdatei liegen, wie z. B. eine "index.htm" oder "index.html"

Die o. a. Browserweiche kann über diesen Link getestet werden. Da wird eine von 2 einfachen HTML Seiten aufgerufen, in der darauf hingewiesen wird, welcher Browsertyp (mobil/Desktop) für den Aufruf benutzt wurde.

Zur Unterscheidung habe ich für Desktop Browser eine kleine Flash Animation eingebaut-, die Seite vertikal auf Mitte gesetzt und dem Hintergrund einen Farbverlauf gegeben.

Für die mobilen Browser entfällt die Flash Animation und die vertikale Ausrichtung, außerdem wird der Hintergrund ohne Verlauf dargestellt.

Viel Erfolg

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

Kommentare

helmar81 schrieb am 14.04.2013 um 17:32 Uhr

Danek für den Tipp ich werde das dann mal versuchen

lupus_III schrieb am 10.06.2013 um 10:21 Uhr

Danke für das Tut.

Zuletzt geändert von lupus_III am 10.06.2013, 19:15, insgesamt 2-mal geändert.

Wenn Du Dein Problem mit dem/den erhaltenen Tipp(s) lösen konntest, wäre es nett, wenn Du auf den Button "Danke" klickst.
Ein Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s) wäre optimal. Das hilft allen Forumbesuchern , die, mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind.
Klar, dass auch die/der Tippgeber sich freut, wenn ihre/seine Hilfestellung mit einem Feedback belohnt wird und nicht ins Leere geht.

LG Lupus_III

AndreasW schrieb am 15.07.2013 um 22:51 Uhr


Hallo,

funktioniert prima, aber:

Wie kommt google mit so einer php-Weiche zurecht? Werden die darauf folgenden Startseiten genauso bewertet wie sonst eine index.htm?

Gruß, Andreas

michael.schulz73 schrieb am 10.02.2014 um 19:09 Uhr

Hallo BeRo,

habe es leider nicht hinbekommen. Darf  ich Dir einen Screenshot schicken, damit Du Dir das anschauen kannst? Stecke echt in der Klemme...

 

Danke im Voraus 

 

Michael 

BeRo schrieb am 10.02.2014 um 21:54 Uhr

@ michael.schulz73

[...] Darf  ich Dir einen Screenshot schicken [...]

Kein Problem. Wenn Du den Screenshot- und eine detaillierte Beschreibung Deines Problems in Dener Antwort postest, haben alle etwas davon...

CU

Zuletzt geändert von BeRo am 10.02.2014, 21:54, insgesamt 1-mal geändert.

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

Danhi schrieb am 01.05.2014 um 21:22 Uhr

Hallo,

wer den Webspeicher von Magix verwendet, der kann die PHP-Lösung leider nicht nutzen. Wohl aber unterstützt der Web-Speicher von Magix JavaScript. Also kann eine Weiche mittels JavaScript eingebaut werden.

Ich hatte mich nämlich sehr geärgert, dass die PHP-Lösung nicht klappen wollte.
Auf Anfrage von Magix schrieb der Support: 

"... Dateien, die zur korrekten Darstellung interpretiert werden müssen ( z.b. .php, .asp etc.) oder von anderen Programmen dazu serverseitig verarbeitet werden müssen, werden nicht unterstützt (ausgenommen Javascript). ...")

 

Daniel

anika_wienbeck schrieb am 25.03.2015 um 10:45 Uhr

Hallo BeRo,

darf ich Dir dazu eine Frage stellen?

Ist dieser Code nur für die, die Ihre Domain über Magix haben?

Ich habe eine über Magix gestaltet, die über 1&1 läuft. Ich lade also im Magix den html code runter und setzte den dann per File Zilla Client auf die 1&1 Seite.

Wie verbinde ich Deinen oben angegebenen Code mit dem von der Webseite, den ich runterlade und wie funktioniert das dann noch mit dem Code der mobilen Seite - den muss ich ja dann auch runterladen.

Packe ich die alle "hintereinander" in das "index.php"?

Ich bin wirklich Anfänger, entschuldige wenn ich hier vielleicht etwas komisch frage!

Würde mich sehr über eine Antwort freuen!

Danke und Grüße!

BeRo schrieb am 25.03.2015 um 23:50 Uhr

@anika_wienbeck

[...] Ist dieser Code nur für die, die Ihre Domain über Magix haben [...]

Nein, das Gegenteil ist richtig. Da die Magix Server (noch) kein PHP unterstützen, kann die o. a. Weiche hier nicht eingesetzt werden.

[...] Ich lade also im Magix den html code runter und setzte den dann per File Zilla Client auf die 1&1 Seite. [...]

Da die Webserver von 1&1 PHP unterstützen, sollte das funktionieren.

[...] wie funktioniert das dann noch mit dem Code der mobilen Seite [...] Packe ich die alle "hintereinander" in das "index.php"? [...]

Die index.php dient ausschließlich als Weiche. Die aufrufenden Browser teilen dem PHP Skript ihre Identität mit, damit das Skript die für den Browser passende Startseite ausliefern kann. Die index.php muss (darf) also nicht verändert werden.

Wie im Tutorial erklärt, müssen mindestens 2 voneinander unabhängige Versionen Deiner Website auf dem Webserver liegen, eine Version für die Mobilgeräte und eine andere Version für die Desktop Geräte. Beide Versionen sind (und bleiben) voneinander unabhängig. Sie müssen mit dem Web Designer auch separat, in 2 verschiedenen Projekten bearbeitet werden.

Wenn Du möchtest, kannst Du aber auf Deinen Startseiten Links von einer Version zur jeweils anderen anlegen, damit ein Besucher selbst entscheiden kann, welche Version er auf seinem Gerät sehen möchte.

Probier's nochmal und wenn Du noch Fragen hast, melde Dich einfach wieder...

Viel Erfolg

Zuletzt geändert von BeRo am 25.03.2015, 23:50, insgesamt 1-mal geändert.

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

Ehemaliger User schrieb am 27.04.2015 um 12:38 Uhr

Klasse! Vielen Dank dafür funktioniert ohne Probleme.

Naja ein kleines Problem habe ich doch noch und zwar was mache ich wenn Besucher mit seinen Smartphone ankommt auf die mobile Seite geleitet wird, er aber trotzdem gerne die Desktop Version sehen möchte?

BeRo schrieb am 27.04.2015 um 12:58 Uhr

@beat1988

[...] was mache ich wenn Besucher mit seinen Smartphone [...] trotzdem gerne die Desktop Version sehen möchte? [...]

Dann machst Du (klick).

Viel Erfolg und einen schönen Start in die neue Woche

Zuletzt geändert von BeRo am 14.01.2016, 13:57, insgesamt 3-mal geändert.

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

jusei01 schrieb am 05.05.2018 um 10:48 Uhr

Hallo, das klappt ja so weit ganz gut - ausgenommen bei Fernsehgeräten. Wenn ich die ''mobi-Seite'' im Browser meines Panasonic-Fernsehers aufrufe, wird statt der Desktop die mobile Version angezeigt. Gibt es dafür auch einen Lösungsansatz? VG Jutta

BeRo schrieb am 05.05.2018 um 11:37 Uhr

[...] Wenn ich die ''mobi-Seite'' im Browser meines Panasonic-Fernsehers aufrufe, wird statt der Desktop die mobile Version angezeigt. [...]

Das liegt daran, dass vom TV der gleiche Browser verwendet wird, der auch den Panasonic Smartphones mitgegeben wurde.
Du kannst nun entweder den Panasonic User Agent aus der PHP Abfrage löschen (im u. a. Code fett und unterstrichen)...

<?php
$useragent = $_SERVER['HTTP_USER_AGENT'];
if (preg_match("/(alcatel|amoi|android|avantgo|blackberry|benq|cell|cricket|docomo|elaine
|htc|iemobile|iphone|ipad|ipaq|ipod|j2me|java|midp|mini|mmp|mobi|motorola|nec-|nokia|palm|
panasonic|philips|phone|playbook|sagem|sharp|sie-|silk|smartphone|sony|symbian|t-mobile|telus
|up\.browser|up\.link|vodafone|wap|webos|wireless|xda|xoom|zte)/i",$useragent))
{
header("Location: ../mobil/index.htm");
} else {
header( 'Location: start.htm' );
}
?>

...was den Nachteil hat, dass alle Besucher der Site, die mit einem Panasonic Smartphone surfen, nur noch die Desktop Variante zu sehen bekommen. 😫

Oder Du baust eine automatische- bzw. interaktive Abfrage ein, die den Besucher entweder direkt auf die Desktop Variante weiterleitet oder ihm die manuelle Auswahl der Seitendarstellung anbietet, so, wie ich das hier beschrieben habe...

Viel Erfolg

Zuletzt geändert von BeRo am 05.05.2018, 11:38, insgesamt 1-mal geändert.

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

jusei01 schrieb am 05.05.2018 um 19:30 Uhr
Oder Du baust eine automatische- bzw. interaktive Abfrage ein, die den Besucher entweder direkt auf die Desktop Variante weiterleitet oder ihm die manuelle Auswahl der Seitendarstellung anbietet, so, wie ich das hier beschrieben habe...

Viel Erfolg

 

Vielen Dank, werde ich mich gleich dransetzen.