zur « Themenübersicht Dit&Dat

Diverses - Sparte

Eingetragen / aktualisiert am 18.01.2014

Mobile Endegeräte wie SmartPhones und Tablets kommen zunehmend zum Einsatz, Ende 2012 lag der Anteil bereits bei > 20% mit stark steigender Tendenz.

Da die meisten Webseiten zur Darstellung gerade für SmartPhones ungeeignet sind, sollte man sich als Homepagebetreiber langsam überlegen, geeignete Versionen für Tablets und SmartPhones zu erstellen um hier keine Besucher zu verlieren!

Die meisten Lösungen sind zwar schon im Netz zu finden, halte ich aber für ungünstig, belasten teils den Server unnötig, beinhalten zu viel Code oder sind schlicht unpraktisch. Ich habe mir meine eigene Lösung erstellt, die ich unten darstelle.
Hier möchte ich einige Tipps, Strategien und auch schon bekannte Lösungsansätze mit den Codes vorstellen.

Browserweiche über einen Meta-Tag (Media Queries)

Diese Lösung ist ausreichend, wenn das Design, bzw. die Inhalte nicht all zu kompliziert sind und eine für SmartPhones angepasste CSS-Datei ausreicht.

<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="/css/phone.css" />

Meistens reicht eine eigene CSS-Datei aber nicht aus und ich halte ein eigenes Verzeichnis für die mobile Version eh für besser. Legt ein Verzeichnis an, wo ihr eure Homepage sozusagen spiegelt, legt eine subdomain wie mobile.DeineSeite.de an und leitet über eine Browserweiche auf die mobile Version um.

Browserweiche über den User Agent:

Hier wird der User Agent, sprich der Browser ermittelt auf dessen eine Umleitung durchgeführt oder eine bestimmte CSS-Datei angesprochen wird.

NACHTEIL:
Man benötigt eine umfangreiche Liste der möglichen Browser und viele Browser geben sich als ein anderer Browser aus. Als Folge funktioniert die Browserweiche nicht korrekt!

User Agent mit PHP umleiten

if(strstr($_SERVER['HTTP_USER_AGENT'], 'iPhone') ||
strstr($_SERVER['HTTP_USER_AGENT'], 'Android') ||
strstr($_SERVER['HTTP_USER_AGENT'], 'BlackBerry')) {
header('Location: http://mobile.DeineSeite.de');
exit();
}

User Agent mit JavaScript umleiten

<script type="text/javascript">
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/Android/i))) {
window.location = "http://mobile.DeineSeite.de";}
</script>

User Agent mit htaccess umleiten

WICHTIG: Auf euren Server muss mode_rewrite auf on stehen! Vorher testen oder informieren!

RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} ^.*iPhone.*$
RewriteRule ^(.*)$ http://mobile.DeineSeite.de [R=301]
RewriteCond &amp;{HTTP_USER_AGENT} ^.*Android.*$
RewriteRule ^(.*)$ http://mobile.DeineSeite.de [R=301]

Browserweiche über die Auflösung

...mittels Meta-Tag, JavaScript und PHP. Hört sich kompliziert an, ist aber nur ein kleiner Code-Schnipsel.

Warum:
JavaScript ist in nahezu allen SmartPhones und mobilen Endgeräte aktiviert, es werden kaum Besucher ausgeschlossen. Mittels Auflösung ist es egal, welches Betriebssystem oder Browser zum Einsatz kommen, erreicht die Auflösung keine bestimmte Größe, wird die Mobile Seite angezeigt.
PHP kommt deshalb zum Einsatz, damit die momentane URI ermittelt wird um auch auf das mobile Gegenstück umzuleiten! In den meisten Fällen ist es ja so, dass die Besucher über einen Link oder Suchmaschine auf eure Seite kommen. Da wäre es absolut nervig, wenn einfach auf die andere Startseite verwiesen werden würde!

WICHTIG: Eure Homepage muss im mobilen Verzeichnis absolut gespiegelt, also eine Kopie sein! Diesen Code unterhalb von <head> einfügen, anpassen nicht vergessen ;-)

<script language="JavaScript">
if (screen.width < 640) {  
   document.write ('<meta http-equiv="refresh" content="0; URL=http://mobil.zielseite.de<?php echo $_SERVER['REQUEST_URI'];?>" />')                   
}
</script>

Was passiert?
Mittels JavaScript wird die Bildschirmauflösung ermittelt. Ist diese kleiner als 640, wirde der Refresh Meta-Tag generiert, mit content=0 (Angabe in Sekunden) wird unmittelbar auf die mobile Version umgeleitet. Mit $_SERVER['REQUEST_URI wird die momentane URI ermittelt und an die URL dran gehängt. Es entsteht dann ein http://mobil.zielseite.de/jetzige URI.html und es wird genau die gespiegelte Seite aufgerufen.

Kritiker mögen den Refresh-Tag ablehnen, aber bisher haben alle mobilen Endgeräte mit den unterschiedlichsten Browsern vom iPad bist Android SmartPhone den Befehl ausgeführt.

 

 

Browserweiche69Umleitung auf mobile Endgeraete