iPhone-User auf optimierte Website umleiten
Wenn Ihr für Eure Website zusätzlich eine iPhone-optimierte Version erstellt habt, so steht Ihr vor der Wahl ob standardmäßig alle iPhone-User auf diese mobile Seite weitergeleitet werden sollen oder ob der Besucher selbst entscheiden darf welche Website er besuchen möchte. Eine der vielfältigen Möglichkeiten ist das nachfolgende Script. Bindet einfach folgenden JavaScript-Code in den <body> Eures Dokuments ein und ruft die Funktion anschließend über onLoad beim Laden der Seite auf.
JavaScript für den <body>
Fügt folgendes Script in Euer Dokument ein und passt die URLs und die Info-Nachricht entsprechend an.
<script type="text/javascript"> function ios_redirect() { if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.match(/iPod/i))){ var question = confirm("iPhone optimierte Version anzeigen?") if (question){ window.location = "http://www.hier-der-pfad-zur-iphone-optimierten-website"; // user klickt auf OK }else{ window.location = "http://www.hier-der-pfad-zur-standard-website"; // user klickt auf cancel }}} </script>
onLoad-Befehl für den öffnenden <body>-Tag
Innerhalb des öffnenden <body>-Tags muss die Funktion aufgerufen werden.
<body onLoad="ios_redirect();">
Wenn nun ein Besucher die Website mit dem iPhone aufruft erhält er eine System-Nachricht. Hier kann er wählen welche Version aufgerufen werden soll – also entweder die normale Seite oder die für das iPhone erstellte Website.
Fazit
Ich finde die Umsetzung ist eine sehr komfortable Lösung um dem Besucher die volle Freiheit bei der Benutzung Eurer Website zu überlassen. Allerdings habe ich im Hinterkopf, dass die Abfrage eines Besuchers mittels userAgent nicht die optimale Lösung ist. Wenn Ihr hier ein paar ergänzende Informationen beisteuern könnt bin ich Euch sehr dankbar.
Der Artikel wurde von diesem Beitrag inspiriert.
Themenverwandte Artikel:
Folgende Beiträge könnten dich ebenfalls interessieren.
Welcome to Kulturbanause, the private blog & portfolio of
20. Juli 2010, 17:18 Uhr
und so sieht das ganze mit php aus ;)
function isiPhone() {
return (ereg(‘iPhone’,$_SERVER['HTTP_USER_AGENT'])) > 0;
}
21. Juli 2010, 06:10 Uhr
Danke. Sinnvolle Ergänzung.
21. Juli 2010, 07:34 Uhr
userAgent sollte kein Problem darstellen. Solange du das ganze nur für iPhone User nutzen willst, rennt das imho einwandfrei. Zur PHP-Variante: Hier bleibt es dem User entweder nicht selbst überlassen, ob er die optimierte Version sehen will oder man benötigt min. zwei Requests (page reload)
21. Juli 2010, 16:32 Uhr
@Christian bei manchen Seiten stellt sich jedoch die Frage, ob man wirklich die volle Website laden soll z.B. viele Bilder, js etc.
dieses Skript sollte die meisten mobilen Geräte erkennen
function ismobile(){
$useragent = $_SERVER['HTTP_USER_AGENT'];
// Standard vendor-model/version user agents
if(preg_match(‘/^((ACER¦Alcatel¦AUDIOVOX¦BlackBerry¦CDM¦Ericsson¦LG\b¦LGE¦Motorola¦MOT¦NEC¦Nokia¦Panasonic¦QCI¦SAGEM¦SAMSUNG¦SEC¦Sanyo¦Sendo¦SHARP¦SIE¦SonyEricsson¦Telit¦Telit_mobile_Terminals¦TSM)[- ]?([^\/\s\_]+))(\/(\S+))?/’, $useragent)){
return true;
}else{
return false;
}
}
29. Juli 2010, 17:54 Uhr
Klappt soweit ganz gut. Nur wenn ich bei der Info-Nachricht “Abbrechen” anklicke werde ich nicht zur Standard-Website umgeleitet, sondern die Info-Nachricht erscheint immer wieder.
18. August 2010, 08:35 Uhr
@Jens & all:
Damit man bei einem Klick auf “Abbrechen” auch wirklich auf der eigentlichen Website bleibt, lässt man einfach das “else” weg:
else { window.location = “http://www.hier-der-pfad-zur-standard-website”; }
Dadurch wird die Seite nicht erneut aufgerufen.