Design, Interaction, Code & Teaching

005 Javascript-Weiche für Browser und Screengrößen – Responsive CSS Part II

Javascript-Weiche für iPhone und Smartphone

Diese Flipped Classroom Serie beschäftigt sich mit Webpräzensen für unterschiedliche Screengrößen und Devices von Smartphone bis Cinema-Display. Der erste Artikel erklärt ein Responsive Basislayout.

In diesem Artikel stelle ich die zweite Strategie vor: Für individuelle Devices oder unterschiedliche Bildschirmgrößen separate Webseiten anzeigen. Mehrere Seiten zu pflegen kann sehr aufwendig werden. Manchmal führt allerdings kein Weg daran vorbei, zum Beispiel wenn die normale Webseite auf Flash basiert und mobile Devices das Flash-Format nicht unterstützen. Adobe hat die Entwicklung des Mobile-Flash-Players komplett eingestellt.

Programmatische Logik

Welche Webseite der User angezeigt bekommt – die Smartphone-Version oder die klassische Webseite – sollte automatisch passieren. Dafür braucht es eine programmatische Logik. Ein Stück Code, der Browserparameter überprüft und die entsprechende Webseite lädt. Diese Logik kann auf dem Server oder im Browser implementiert werden. Ich zeige hier eine sehr einfache Logik mit einem Javascript-Schnipsel für die Browserseite. Mit Javascript können diverse Eigenschaften des Browsers abgefragt werden wie die UserAgent, die Auskunft über den Browser und das Betriebssystem gibt, oder die Bildschirmgröße (nicht zu verwechseln mit der Browsergröße beim Responsive-Design-Ansatz).

Strategie

Die hier vorgestellte Logik soll folgendermaßen funktionieren. Als Erstes wird die normale Webseite geladen. In der Webseite überprüft ein Javascript die UserAgent. Die Abfrage gibt ein Stück Text zurück, welches das Wort ‚iPhone‘ bei einem iPhone enthält. Wenn dieser Textschnipsel in dem Text gefunden werden kann, wird eine neue Seite geladen: die iPhone Webseite. Eine zweite Abfrage untersucht die Größe des Bildschirms. Wenn der Bildschirm kleiner als 500 Pixel ist, wäre das die allgemeine Bedingung für das Laden der Smartphone-Seite. Das war es schon.

Demo und Code

Demo Javascript-Weiche
Download Code

Device Abfrage mit der UserAgent

Für dieses Beispiel brauchen wir nur zwei HTML-Files. Eine index.html für die klassische Webseite und eine smartphone.html, die aufgerufen wird, sofern die Bedingungen für iPhone oder Bildschirmgröße erfüllt sind.

Im Head der index.html wird das kleine Script geschrieben. Zum Verständnis erkläre ich den kleinen Codeschnipsel genau, was eigentlich das kleine Script bewirkt, Mit dem Alert-Befehl werden PopUps erzeugt, die einfach ein Stück Text anzeigen.

1
2
3
4
5
6
7
8
9
/* html head code */

<script type="text/javascript">// <![CDATA[

    alert( "hello world");

// ]]></script>

/* rest of the document */

javascript alert hello world

Mit diesem Alert-Befehl kann man sich sich die aktuelle UserAgent anzeigen lassen. Navigator ist das Javascript-Object für den Browser und die userAgent eine Eigenschaft von dem Object.

1
alert( navigator.userAgent);

Javasscript Alert Javascript userAgent<

Die UserAgent ist leider keine 100% sichere Abfrage. Ich kann die UserAgent in den Entwicklereinstellungen von Safari einfach umstellen. Dafür müssen die Entwicklereinstellungen angestellt werden: Einstellungen > Erweitert > Häckchen Entwicklereinstellungen. Dann unter Menü Entwickler > UserAgent hat man die freie Auswahl. Einfach mal auf iOS umstellen und die Seite reloaden. Der Alert-Befehl gibt vor, es handele sich um ein iPhone. Safari auf meine Mac imitiert ein iOS. Das ist prima zum Testen.

Javascript Alert iPhone UserAgent

Bildschirmgröße abfragen

Die Bildschirmgröße kann über das Javascript-Object screen mit der Eigenschaft availWidth abegefragt werden. Auch das kann ich mir einfach mit dem Alert-Befehlt anzeigen lassen.

1
alert( screen.availWidth);

Javascript Alert availWidth

Unterschiedliche Bildschirmgrößen können nicht im Entwicklermenü eingestellt werden, aber unter Systemeinstellungen des Computers kann man auch das Einstellen.

Bedingungen

Jetzt konstruieren wir unsere Bedingungen für die Abfrage: if( ‚Bedingung wahr‘) { ‚mache folgendes‘}

1
2
3
4
5
6
if (navigator.userAgent.toLowerCase().indexOf('iphone') > -1) {
    location.href = 'smartphone.html';
}
if(screen.availWidth&lt;500){
    location.href = 'smartphone.html';
}

Location.href veranlasst das Laden der smartPhone.html.

Die erste Bedingung untersucht die UserAgent. Die Methode ‚toLowerCase()‘ wandelt den Text der userAgent in Kleinbuchstaben um und sucht mit ‚indexOf(‚iphone)‘ nach dem ersten Vorkommen des Wortes iPhone. Wird das Wort nicht gefunden, wird der Wert -1 zurückgegeben und sonst der Index des Wortes im Text. Damit haben wir ein mögliches iPhone erkannt.

Die zweite Bedingung erkennt allgemein die Bildschirmbreite, um auch andere Smarthones zu filtern. Die Definition ist: Bildschirm kleiner als 500 Pixel, dann smartphone.html laden.

Fertig ist das kleine Beispiel. Im Webbrowser kann über die Einstellung UserAgent getestet werden oder natürlich auch im iOS-Simulator.

Javascript Switch Websites

Ready

Mit zwei kleinen Codeschnipseln-Javascript lässt sich eine einfache Javascript-Weiche basteln. Dieser Code kann an persönliche Bedürfnisse angepasst zum Beispiel, um das iPad oder Android Smartphone Versionen zu filtern.

Hier noch Mal Demo & Code

Demo Javascript-Weiche
Download Code

Artikel dieser Serie Responsive CSS

Part I: Responsive-CSS mit CSS3-Media-Queries
Part II: Javascript-Switch für das iPhone und unterschiedliche Screengrößen
Part II: Bilder für Retina- und High-Resolution Displays

Phonegap Wrapper

Eine kleine Anmerkung noch: HTML5, CSS3 und Javascript Webseiten lassen in Apps für iOS, Android und andere Systeme wrappen und in den AppStores publizieren. Wrappen heißt: Die HTML5-Seiten werden in ein Programm der jeweiligen Plattform implementiert und könne als App benutzt werden. Die freie Software Phonegap ermöglicht das auf recht komfortable Art & Weise.


Über den Autor


Prof. Pepe Jürgens konzipiert, gestaltet und programmiert seit 20 Jahren digitale Medien. Er gründete das interdisziplinäre Design-Studio Weltformat und ist Co-Founder von lernox mit dem Ziel, freie Lehr- und Lernmaterialien aus dem Internet zu kuratieren. Seit 2013 doziert Pepe Jürgens Interaction Design an der Hochschule der populären Künste in Berlin


4 Kommentare

  1. Posted 27. Juni 2014 at 08:18 | Permalink

    SUPER gemacht.
    Hat mir auch sehr geholfen, rasch zum Ziel zu kommen. Vielen DANK!

  2. Sascha Ehlers
    Posted 14. Dezember 2015 at 12:04 | Permalink

    Vielen Dank, wirklich super gemacht und hat mich 100%ig an mein Zeil und zwar eine gek. Smartphone-Version parallel zu meiner bestehenden Homepage relativ schnell zu kreieren. Gut, alles ein bisschen Bastelei, aber man freut sich wirklich, wenn’s gut geklappt hat. Es waren genau die Infos die ich hierfür gebraucht habe… -> DANKE !
    Gruß,
    Sascha Ehlers

  3. Posted 4. März 2016 at 09:36 | Permalink

    Cool danke dir. Gibt es da auch noch eine Möglichkeit das direkt im PHP zu erledigen?

    Das wäre auch echt hilfreich…

    • pepe
      Posted 5. März 2016 at 09:00 | Permalink

      Du kannst zum Beispiel über PHP die userAgent auslesen und das als Ausgangspunkt für den switch nehmen. Google mal php recognize mobile device …

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>