Webentwicklung für den iPhone-Safari

iphone-clickpressNachdem ich vor kurzem eine Website für das iPhone optimieren durfte, habe ich viel im Netz recherchiert und möchte Euch mein gesammeltes Wissen nicht vorenthalten.

Design

Zum Designen einer iPhone-App, bzw. Website eignet sich bestens die iPhone GUI PSD von Geoff Teehan:
teehanlax.com/blog/?p=1628

Wie groß ist der Viewport?
Der iPhone-Screen hat eine Auflösung von 480 x 320 Pixel Der Viewport des Browsers abzgl. der Browser- und Statusleiste beträgt: 320 x 356 Pixel (Landscape) und 480 x 208 Pixel (Portrait).

App-Icon für die Website
Man kann über das + in der Statusleiste einen Shortcut zur Website erstellen. Hierfür legt man einfach ein 60 x 60 Pixel großes PNG an. Die abgerundeten Ecken und den Glosseffekt fügt das iPhone hinterher selbst hinzu.
Die Einbindung funktioniert ähnlich wie beim Favicon: man benennt das Icon einfach apple-touch-icon.png und legt es ins Rootverzeichnis. Etwas mehr Freiheit bietet der -Tag:

<link rel="apple-touch-icon" href="https://rootserver-blog.de/mein-icon.png" />

HTML

Um ein extra CSS zu laden wird nicht media=“handheld“ genutzt, sondern folgendes Attribut:

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

Die automatische, bzw. usergesteuerte Skalierung kann man mit folgendem Metatag steuern

<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=1" />

Umfangreiche Informationen zu den Möglichkeiten mit HTML findet man unter
developer.apple.com/safari…SafariHTMLRef/Introduction.html

Adressen
Generell ist es immer eine gute Idee Adressen im Web im hCard-Format zu verfassen. Dieses Format kennzeichnet sich durch festgelegte CSS-Klassen aus, z.B.

<span class="name">Stefan</span>

hCard-Informationen
hCard-Generator

Eine Telefonnummer kann per Linktyp tel verlinkt werden:

<a href="tel:012345/123123">Rufen Sie uns an!</a>

Verlinkungen zur Maps-App funktionieren ganz einfach über das a-Tag. Hierzu geht man einfach auf maps.google.com, sucht seinen Ort und holt sich in der Karte über die Link-Funktion (rechts oberhalb der Karte) die URL:

<a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Iserlohn&sll=37.0625,-95.677068&sspn=47.483365,79.013672&ie=UTF8&ll=51.372263,7.709484&spn=0.03681,0.077162&z=14">Unser Standort (wechseln zu Maps)</a>

CSS

Das iPhone besitzt eine umfangreiche CSS3-Implementierung. Noch nicht vom W3C festgelegte Eigenschaften werden einfach ein -webkit vorangestellt, z.B.:

#box {
    -webkit-border-radius: 4px;
}

Umfangreiche Informationen zu den Möglichkeiten mit CSS findet man unter
developer.apple.com/safari…SafariCSSRef/Introduction.html

Schriften im iPhone-Safari

  • AmericanTypewriter, AmericanTypewriterBold
  • Arial, ArialBold, ArialBoldItalic, ArialItalic, ArialRoundedMTBold
  • Helvetica, HelveticaBold, HelveticaBoldOblique, HelveticaOblique
  • MarkerFeltThin
  • TimesNewRoman, TimesNewRomanBold, TimesNewRomanBoldItalic, TimesNewRomanItalic
  • CourierNew, CourierNewBold, CourierNewBoldItalic, CourierNewItalic
  • Georgia, GeorgiaBold, GeorgiaBoldItalic, GeorgiaItalic
  • TrebuchetMS, TrebuchetMSBold, TrebuchetMSBoldItalic, TrebuchetMSItalic,
  • Verdana, VerdanaBold, VerdanaBoldItalic, VerdanaItalic
  • Zapfino

Javascript

Zum Entwickeln und Testen kann man unter den iPhone-Einstellungen->Safari->Entwickler->Debug-Konsole das Debugging aktivieren.

Um zu Überprüfen, ob der User im Landscape- oder Portrait-Modus die Seite betrachtet kann folgendes JS eingesetzt werden:

<script type="application/x-javascript">
 
    addEventListener('load', function() {
        setTimeout(orientationChange, 0);
    }, false);
 
    var currentWidth = 0;
 
    function orientationChange()
    {
	    if (window.innerWidth != currentWidth)
        {
      	    currentWidth = window.innerWidth;
	    var orient = currentWidth == 320 ? 'portrait' : 'landscape';
            document.body.setAttribute('orient', orient);
        }
    }
 
    setInterval(orientationChange, 400);
 
</script>

Da ich gerne jQuery nutze, hab ich das Script dementsprechend umgeschrieben:

<script type="application/x-javascript">
 
        $(document).ready(function() {
 
            var currentWidth = 0;
            var refreshId = setInterval(function() {
                var width = $(window).width();
                $('body').attr('orient', function(arr) {
                    if( width!=currentWidth ) {
                        currentWidth = width;
                        var orient = currentWidth == 320 ? 'portrait' : 'landscape';
                        return orient;
                    }
                });
            },400);
        });
</script>

Gerne nehme ich Optimierungen am jQuery-Script entgegen ;)

Es wird alle 400 Millisekunden der Viewport gemessen und dem body-Tag dynamisch ein Attribut orient mit dem Wert landscape oder portrait verpasst, als Beispiel:

<body orient="landscape">

Dieses Attribut kann nun über folgenden CSS-Selektor abgefragt werden:

body[orient=landscape] { width: 480px; }
body[orient=portrait]    { width: 320px; }

Auch praktisch für automatische Bildverkleinerung (geht gut mit dem Safari!) für den Portrait-Modus.

body[orient=portrait] #gallery img  { width: 280px; }

PHP

Der iPhone-Useragent kennzeichnet sich wie folgt:

Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; de-de) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16

Die User-Agent-Erkennung in PHP könnte dementsprechend so aussehen:

    if (stristr($_SERVER['HTTP_USER_AGENT'], 'iPhone'))
    {
        // Code
        // z.B. header('location: iphone/'); exit;
    }

Video

Es gibt natürlich die Möglichkeit einfache Videolinks zu YouTube zu setzen, was aber eher benutzerunfreundlich ist, da der User den Safari verlässt und in der YouTube-App landet.

Der Safari im iPhone kann ein Video direkt wiedergeben, solange es das richtige Format hat. Wer Adobe CS4 sein Eigen nennt, kann mit dem Adobe MediaEncoder Videos in ein iPhone-kompatibles Format wandeln, hierfür nimmt man einfach die Voreinstellung Apple iPod Video klein. Nach der Konvertierung bekommt man ein MP4 mit H.264-Codec. Audio wird als AAC mit 128 kbit/s, 48kHz in Stereo kodiert.

Es gibt auch diverse kostenlose Software zum Konvertieren im Netz, da ich aber keine Erfahrungen hierzu habe, kann ich auch keine Aussage zu diesen Tools geben.

Weiterführende Links:

  1. iPhone GUI PSD: Photoshop-Template
  2. iUI: JS/CSS-Framework für iPhone-Webapps
  3. cssiphone.com: iPhone CSS Design Gallery
  4. webmasterpro.de: Mobile Device Webdesign am Beispiel iPhone
  5. Safari Dev Center
  6. UserAgentSwitcher: Firefox-Plugin

Weiterführende Literatur:

  1. iPhone OS Webentwicklung. Professionelle Applikationen für WebKit-Browser
  2. Professional iPhone and iPod touch Programming: Building Applications for Mobile Safari

12 Antworten auf „Webentwicklung für den iPhone-Safari“

  1. Also:

    funktioniert bei mir nicht. Habe ich verlinkt, angepasst und auf den iPhone-Screen optimiert. Aber mein iPhoney-Emulator zeigt fröhlich das Original CSS File an…

    An was könnte das liegen?

  2. Hab gerade gesehen daß er den Code nicht übernommen hatte. Von was oben die Rede war, war der HTML Code um das extra CSS File für das iPhone zu laden.

  3. Mit folgender Variante kann man auch die richtung der „orinetation“ erhalten. angesprochen wird das ganze dann per css – bsp: #body[orient=Portrait]

    function updateOrientation(){
    var orient = „“;
    switch(window.orientation){
    case 0: orient = „Portrait“; break;
    case -90: orient = „Landscape_right“; break;
    case 90: orient=“Landscape_left“; break;
    }
    setOrient(orient);
    }
    function setOrient(orient){
    $(„body“).setAttribute(„orient“,orient,false);
    }

    So kann man noch mehr mit anfangen :-) In der Funktion „setOrient“ kann man dann zum beispiel einen bestimmten Bereich aufrufen je nach ausrichtung – Beispiel: Portrait = standard-HTML | Landscape_left = „über uns“-HTML | Landscape_right = „Hilfe“-HTML …

    Ich hoffe ich konnte jemandem helfen damit :-)

  4. hallo
    danke fuer die infos!
    allerdings wird bei mir die css nicht geladen
    sobald ich das attribute
    media=“only screen and (max-device-width: 480px)“
    da einsetzte
    wenn ichs weg lasse wird es geladen..

  5. Hallo hast du einen Weg gefunden wie man vcards (hcards) direkt in das Adressbuch vom Iphone importieren kann ?

    Ich suche schon ziemlich lange nach einer Lösung…

  6. Pingback: Anonymous

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.