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.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 12 Kommentare

  1. Jens
    schrieb am 29.10.2011 um 13:59 Uhr:

    Klappt super – danke :-).

    Gibt es eigentlich einen Grund hier:
    window.location = „http://www.hier-der-pfad-zur-iphone-optimierten-website“; //

    den gesamten, absoluten Pfad zu nennen oder würde auch ein relativer pfad ausreichen, ohne http://www.xxxxx.de ?

    (Sprich statt http://www.xxxxx.de\subpage\iphone\index.html nur \subpage\iphone\index.html )

    Und die bereits gestellte Frage, wie man dies über ipod / iphone hinaus für andere (alle) mobilen Endgeräte umleitet, die Antwort hierauf würde Deinen Artikel ‚komplett‘ machen. Auch wenn man die Info durch kurzes googeln bestimmt auch finden wird ;-).

    Danke!

    Antworten
  2. Casi
    schrieb am 12.10.2011 um 09:07 Uhr:

    … danke ersteinmal für diesen Thread… bei mir fragt der Browser des iPhones leider nicht nach ob die mobile Version angezeigt werden soll, sondern führt einfach ohne zu fragen weiter.

    Danke schon einmal für ne Antwort.

    Antworten
  3. Felix
    schrieb am 19.07.2011 um 11:01 Uhr:

    Ein interessanter Artikel.

    Die letzten beiden Kommentare beziehungsweise Fragen von Matthias und Peter dazu finde ich sehr wichtig. Wie sieht es da aus?

    Antworten
  4. Peter
    schrieb am 14.01.2011 um 13:13 Uhr:

    Wenn ich jetzt auf Abbrechen gehe und auf die normale Startseite gelange und auf der Seite rumsurfe und dann wieder auf die Startseite klicke, dann bekomme ich wieder die Abfrage angezeigt.

    Gibt es dafür eine Lösung?

    Antworten
  5. Matthias
    schrieb am 15.10.2010 um 14:08 Uhr:

    Gibt´s so eine elegante Java-Lösung auch nicht nur für Iphone/ipod, sondern gängige Smartphones?

    Antworten
  6. Axel Der Autoschieber
    schrieb am 10.10.2010 um 15:17 Uhr:

    Hi,

    danke für dein Skript , ich benutze das jetzt auch auf http://m.kfz.net manche Seiten von der Desktop Version leite ich so auf die Mobile Seite um. Ich frage mich jedoch ob ob der Google Bot das nicht negativ sieht?

    Antworten
  7. shawrry
    schrieb am 18.08.2010 um 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.

    Antworten
  8. Jens
    schrieb am 29.07.2010 um 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.

    Antworten
  9. René Maas
    schrieb am 21.07.2010 um 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;
    }
    }

    Antworten
  10. Christian Gatzen
    schrieb am 21.07.2010 um 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)

    Antworten
  11. René Maas
    schrieb am 20.07.2010 um 17:18 Uhr:

    und so sieht das ganze mit php aus ;)

    function isiPhone() {
    return (ereg(‚iPhone‘,$_SERVER[‚HTTP_USER_AGENT‘])) > 0;
    }

    Antworten
    • Jonas Hellwig
      schrieb am 21.07.2010 um 06:10 Uhr:

      Danke. Sinnvolle Ergänzung.

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →