Sie befinden sich hier:
» 
» 
28.12.2011

Praktische Beispiele: Umleitung auf mobile Webseiten

Update: 09.01.2015 - Aktualisierung der UserAgent-Erkennung
Eine Möglichkeit der Unterscheidung, ob die mobile oder die herkömmliche Version einer Webseite ausgeliefert wird, basiert – wie bereits beschrieben - auf der Auswertung des User-Agents des Browsers. Die folgenden praktischen Beispiele sollen dies verdeutlichen. Sie können die Beispiele für Ihre Webseiten verwenden und individuell anpassen.

Umleitungen auf mobile Webseiten mittels PHP

Die beigefügte PHP-Klasse zur Umleitung auf mobile Webseiten erfüllt folgende Anforderungen:

  • Umleitung zu einer Domain, z.B. http://m.meine-seiten.de
  • Umleitung zu einer Domain, z.B. http://www.meine-seiten.mobi
  • Umleitung in ein spezielles Unterverzeichnis, z.B. http://www.meine-seiten.de/m/

Anwendungsbeispiel: siehe index.php in beigefügter Klasse

Alternative:
Wenn die Unterscheidung innerhalb der gleichen Webseite erfolgen soll, z.B. nur Verwendung einer unterschiedlichen DOCTYPE-Definition oder unterschiedlicher Stylesheets, so ist dies ebenfalls möglich (siehe index2.php).

Zusatz:
Bei Verwendung des GET-Parameters noMobile, z.B. http://www.meine-seiten?noMobile=true wird kein Redirect ausgeführt. Dies ist nützlich, wenn man sich z.B. auf der mobilen Version einer Webseite befindet und einen alternativen Link zu der herkömmlichen Version einer Webseite anbieten will.

PHP-Klasse herunterladen als Zip PHP-Klasse zur Umleitung auf mobile Webseiten

Umleitungen auf mobile Webseiten mittels ASP

Die beigefügte ASP-Klasse zur Umleitung auf mobile Webseiten enthält die gleiche Programmlogik, wie die PHP-Variante. Erläuterungen, siehe ebenfalls PHP-Variante.

ASP-Klasse herunterladen als Zip ASP-Klasse zur Umleitung auf mobile Webseiten

Umleitungen auf mobile Webseiten mittels .htaccess

Die beigefügten .htaccess-Dateien zur Umleitung auf mobile Webseiten erfüllen folgende Anforderungen:

  • Umleitung zu einer Domain, z.B. http://m.meine-seiten.de
  • Umleitung zu einer Domain, z.B. http://www.meine-seiten.mobi
  • Umleitung in ein spezielles Unterverzeichnis, z.B. http://www.meine-seiten.de/m/

Wählen Sie Ihre bevorzugte Variante aus und benennen die betreffende Datei zu .htaccess um, bzw. kopieren Sie die Code-Sequenzen in Ihre vorhandene Datei.

Wenn Sie die Umleitung ebenfalls mit einem zusätzlichen Parameter bypassen wollen, dann finden Sie hier die entsprechende Anleitung.

.htaccess Beispiel herunterladen als Zip .htaccess-Dateien zur Umleitung auf mobile Webseiten

Fazit

Die Umleitung einer Webseite auf Basis des User-Agents ist EINE Möglichkeit. Allerdings gibt es mittlerweile eine Vielzahl verschiedener User-Agents, die auf diese Art kaum noch sicher beherrschbar sind. Chris hatte mir ein sehr detailliertes RegExp gesendet, welches mich dazu bewegt hat, die hier angebotenen Scripte zu aktualisieren. Vielen Dank nochmal dafür. Allerdings muss man auch nach vorn schauen und der Trend geht eindeutig zu responsive WebDesign.

Autor: Mein Name ist Harry Kämpf und ich bin seit vielen Jahren als Projekt Manager im Webumfeld tätig. Auf diesen Erfahrungen basieren die Tipps zur Webseitengestaltung. Ich schreibe gern über Webthemen, nehme aktuelle Trends auf und gebe bei Bedarf kompetente Beratung. Mehr Infos können Sie auf ueber-mich.html nachlesen.

32

Kommentare:

11.April2012

Ein sehr empfehlenswertes php-Script, das die Erkennung von Mobilgeräten super einfach macht.
Besten Dank für Entwicklung und Veröffentlichung!

18.April2012

Wer kann hier helfen. Nach Neugestaltung der Webseite wird Sie nicht mehr auf mobilen Endgeräten (iPhone) skaliert angezeigt. Unser AN kommt da nicht weiter.

www.isayhello.mobi

18.April2012

Als unabhängige dritte Meinung kann ich mir die Sache schon mal näher anschauen....
Werde in Kürze Kontakt aufnehmen.

Gruß Harry

30.Dezember2012

Das mit dem .htaccess umleiten kann ich nur empfehlen. Klappt sehr gut. Dann hat man das ander nicht so.

Geil gemacht.

Wünsch euch noch ein Happy New Year 2013

Gruß
Schlossjunge

01.Januar2013

Ich habe mich zu bedanken. Die Lösung mit der .htaccess ist sehr gut. Die ASP und die PHP-Scripte werde ich mir auch noch anschauen. Gute Arbeit, danke.
Grüße Heiko

03.Januar2013

Hallo,

zunächst alles Gute für 2013!

Noch eine Ergänzung zur php-Lösung: Wer den Wechsel hin und her von der mobilen auf die klassische Version und umgekehrt ermöglicht, kreiert damit doppelten Content.
Um diesen zu vermeiden, frage ich auf der Seite ab, ob die jeweilige Erweiterung vorhanden ist. Wenn ja, gebe ich einen canonical tag zusätzlich aus:
Dafür einfügen im Head-Bereich:
<?php
  if(( substr_count($_SERVER['REQUEST_URI'], '?noMobile=true'))) {
  echo '<link rel="canonical" href="http://www.meineseite.php" />' . "\n";
  }
?>

Gruß
Hildegard Fuchs

04.Januar2013

Sehr guter Hinweis. Habe das ReadMe um eine entsprechende Bemerkung ergänzt.
Ich würde generell empfehlen, das Tag: <link rel="canonical"... in den Header aufzunehmen, um duplicate Content wegen unterschiedlicher Paramenter zu vermeiden. Aus dem selben Grund würde ich auch immer eine Version (z.B. die mobile) für Suchmaschinen über die robots.txt sperren, z.B. "Disallow: /m/"

Gruß Harry

26.Januar2013

Umleitungen auf mobile Webseiten mittels PHP
- Umleitung in ein spezielles Unterverzeichnis, z.B. http://www.meine-seiten.de/m/

Hallo!
Wo genau (an welcher Stelle) muss die http://www.meine-seiten.de/m/ eingetragen werden?
Gruß
Michaela

27.Januar2013

Hallo Michaela,
ganz einfach:
zu Beginn in deiner Seite require_once('clsMobileDetection.php'); einbauen.
Danach in clsMobileDetection.php die letzte Zeile aktivieren:
$objMobile->RedirectMobile("SUBDIR");
Den Namen deiner Website musst du nirgendwo eintragen. Das erkennt die Klasse über Servervariablen automatisch.

Gruß Harry

22.März2013

Hallo,

meine Website liegt auf einem Server in einem Verzeichnis nach dem Muster: http://www.domain.de/verzeichnis/
Ich möchte deshalb, dass das PHP-Script umleitet auf:
Muster: http://www.domain.de/verzeichnis/m/
Stattdessen leitet es mich aber auf
Muster: http://www.domain.de/m/verzeichnis/

Wie kann ich das ändern?

Danke schon mal, Gruß Jens

24.März2013

ab Zeile 209 anpassen

alt:
  if (strtolower(substr($_SERVER['SCRIPT_NAME'],0,3)) <> '/m/')
  $strRedirect .= '/m';

neu:
  if (strpos(strtolower($_SERVER['SCRIPT_NAME']),'/m/') === false) {
  $arrSegments = explode('/', $_SERVER['SCRIPT_NAME']);
    for ($i=1;$i<sizeof($arrSegments);$i++) {
      $strRedirect .= '/'.$arrSegments[$i];
      if ($i==1) $strRedirect .= '/m';
    }
  }

und die Zeile $strRedirect .= $_SERVER['SCRIPT_NAME']; auskommentieren

Gruß Harry

21.Mai2013

Hallo Harry,

sorry für die doofe Frage aber wo soll ich die Klasse clsMobileDetection.php speichern? einfach direkt unter public_html, wo index.html auch ist???

Herzlichen Dank schon mal für deine Antwort.
David

24.Mai2013

Hallo David

wo du die Klasse speicherst ist für die Umleitung egal. Du musst sie nur korrekt referenzieren.

Beispiel in root-Verzeichnis:
<?PHP require_once('clsMobileDetection.php'); ?>

Beispiel in einem Unterverzeichnis:
<?PHP require_once('./VERZEICHNIS_NAME/clsMobileDetection.php'); ?>

Gruß Harry

24.Juni2013

Herzlichen Dank Harry für den super Script (htaccess)!

09.Juli2013

supertolle anleitung. DANKE!

eine frage noch. ist es möglich, dass tablets nicht abgefangen und umgeleitet werden? ... sondern nur smartphones?

danke!

09.Juli2013

Und genau das ist das Problem. Die User-Agents sind mittlerweile so vielfältig geworden, dass es mit der Unterscheidung nicht so einfach ist. Ich sehe als einzig sinnvolle Lösung responsive WebDesign. Ich denke, dort liegt die Zukunft.

Gruß Harry

30.Juli2013

Hallo,

Ich bin völliger Anfänger was .php angeht, daher entschuldigt diese Frage die im Folgendem aufgeführt wird.
Ich hab mit Flash eine Website gestaltet und dazu die gleiche noch mal in JS nun will ich eine Umleitung machen via .php.
Also die Flashwebsite soll auf Desktop-PC angezeigt werden und die JS Seite auf Mobilgeräten wie iPhone etc. !
Das Problem ist ich habe nicht den blassesten Schimmer wie das geht, wie/wo ich was im Code verändere... ^^

Wäre nett wenn mir da jemand das erklären könnte smile

LG
Friedrich

30.Juli2013

Ohne Code kann ich nichts dazu sagen. Du müsstest mir schon einen Link schicken.

Gruß Harry

11.Dezember2013

Hallo Harry,

vorab: super Tool, herzlichen Dank dafür!

Ich habe jedoch ein Problem. Ich habe mich für die Option mit der Umleitung auf ein anderes Verzeichnis ("/m") entschieden. Auf meinem Server (PHP 5.2.17) hat alles einwandfrei funktioniert. Auf dem Server meines Kunden (PHP 5.3.27) funktioniert die Umleitung leider nicht. Außerdem werden bei der index.php keine Umlaute angezeigt. Liegt das an der PHP-Version? Wie kann ich dieses Problem lösen?

Besten Dank im Voraus und viele Grüße
Andi

03.Januar2014

Geht mir genau so wie Andi...

LG

06.Februar2014

Die Ursache lag in der inkorrekte UTF-8 Kodierung. Die Webseite muss als UTF-8 ohne BOM (Byte Order Mark) kodiert werden. Falls die BOM vorhanden ist, kommt die Fehlermeldung, da vor der Umschaltung bereits ein Header gesendet wurde (die BOM).

07.Januar2014

Halli Hallo Harry,

ich habe ein seltsames problem - bei ipad und iphone 4 mit ios6 funktioniert alles - jedoch mit einem 4s mit altem ios kommt die Fehlermeldung "Safari konnte die Seite nicht öffnen da zu viele Umleitungen existieren" das verstehe ich nun überhaupt nicht. Hast du vielleicht eine Idee woran es liegen könnte??

Vielen Dank und beste Grüsse

12.März2014

Hallo,

wirklich super Sache...

Nur eine Frage, wie lange bleibt das denn mit dem Cookie gespeichert?

Also ich lass den Nutzer mit Mobile Device in Unterverzeichnis umleiten. Dort bekommt er dann eine kurze Seite angezeigt mit Hinweis, dass Weiterleitung auf mobile Seite erfolgt (nach 5s). Alternativ kann man in der Zeit über einen Button auf die Desktop-Seite zugreifen. realisiert dann mit ?noMobile=true...

Und das wird ja dann für die zukünftigen Besuche gespeichert. Kann man das verhindern? Also dass der Besucher sich jedes Mal entscheiden muss ob Mobile Seite oder Desktop?

12.Januar2014

Die Lebenszeit des Cookies habe ich auf 30 Tage gesetzt, siehe:
setcookie('noMobile',1,time()+(60*60*24*30));

Wenn die Lebenszeit des Cookies mit Schließen des Browsers enden soll, dann muss es heißen:
setcookie('noMobile',1,0);

Generell gilt:
Wenn der Anwender sein Browser so konfiguriert hat, dass die Lebenszeit der Cookies mit Schließen des Browsers endet, dann ist diese Einstellung natürlich höherwertiger.

03.Oktober2014

Vielen Dank für die toll Seite!
Gibt es ne Möglichkeit dass wenn man die Mobile Seite per PC aufruft, der User auf die normale geleitet wird? Habe es per .htaccess gelöst.

03.Oktober2014

Ja, das ist ein gangbarer Weg. Die Einstellungen kann man sich mit Cookies (sofern im Browser aktiviert) permantent merken.

28.Oktober2014

Hallo,
ich bin Neuling im WebDesign. Habe aber meine Seite in der Desktop-Version und in einer mobilen Version aufgebaut. Wie muss ich die htaccess (siehe oben) verwenden, damit die saubere Umleitung funktioniert?
Freundliche Grüße Norman

28.Oktober2014

Das ist jeweils davon abhängig, ob du auf eine Sub-Domäne, eine mobi-Domäne oder einfach nur in ein anderes Unterverzeichnis umleiten willst. In dem Zip-Archiv (oben) ist für jede dieser Varianten ein Beispiel enthalten. Einfach die Passende auswählen, zu .htaccess umbenennen (oder die vorhandene .htaccess erweitern) und die Beispiel-Domäne „meine-seiten“ durch die eigene Domäne ersetzen.

17.November2014

Hallo,

vielen lieben Dank für das tolle Script. Ich habe mich für .htacces entschieden und es funktioniert auch alles wunderbar. Ich hab nur ein Problem: Die Umleitung funktioniert super wenn man die vollständige Adresse www.teiermobi.de eingibt. Lass ich das "www." weg funktioniert es nicht ?
Gibt es da eine einfache Möglichkeit dies zu ändern ?

Gruß Tobi

18.November2014

Einfach noch eine Rule davor ausführen, z.B.:

RewriteCond %{HTTP_HOST} !^www\.meine-seiten\.de$ [NC]
RewriteRule ^(.*)$ http://www.meine-seiten.de/$1 [R=301]

02.Februar2015

Cool smile
Danke für das Script.
Das hat mir noch gefehlt. Hab die ganze Zeit Probleme mit den User-Agents gehabt doch die gehören jetzt wohl der Vergangenheit an.

03.Dezember2015

DDAAAAANKKEEEE, genau danach habe ich gesucht. funktioniert super.

Wenn ich jetzt aber auf meiner mobilen Seite einen Link "Zur klassischen Ansicht wechseln" haben möchte, wie funktioniert das? Dann werde ich ja wieder auf die mobile weitergeleitet.

03.Dezember2015

Hallo Max,

einfach den Parameter noMobile im Link ergänzen, z.B. http://www.my-pages.com?noMobile=true
==> siehe auch readme.txt

12.Februar2016

DANKE für das tolle Script. Nun habe ich aber gleich eine Frage: wie kann ich Apple-Geräte von der Umleitung ausnehmen?

Besten Dank und LG!smile

16.Februar2016

Hallo Stephan,

ein Ansatz wäre, bei den Pattern die betroffenen Geräte auszuschließen, d.h. folgende Sequenz suchen |ip(hone|od) und entfernen. Damit hätte man iPhone und iPod ausgeschlossen.
In Summe bewegt man sich damit aber auf dünnem Eis. Zusätzlich installierte Browser kann man so nicht erfassen. Es handelt sich hier um eine Browsererkennung auf Basis des User-Agents und nicht um eine Erkennung des Betriebssystems. Auf einem Betriebssystem können verschiedene Browser installiert sein.
Dies ist wieder ein Argument, um vielleicht doch über responsive WebDesign nachzudenken.

06.Mai2016

Hallo,

gibt es die Möglichkeit relativ leicht noch Tablets auf die mobile Seite weiterzuleiten?

Freundliche Grüße
Florian

07.Mai2016

Wenn der User-Agent passt, wird umgeleitet. Da ist es zweitrangig, ob es sich um ein Tablet, Phablet oder Smartphone handelt. Falls es sich um ein bestimmtes Tablet handelt, welches nicht umgeleitet wird, so sind die Erkennungsmuster zu erweitern.
Auch auf die Gefahr hin, mich zu wiederholen, ist responsive WebDesign aktuell die bessere Wahl.