1. Einleitung

Dieses Dokument stellt eine Sammlung von Tipps, Tricks und Erkenntnissen über die Optimierung von Webseiten für mobile Endgeräte, im Besonderen für das iPhone von Apple, dar.

1.1 Wie stellt das Apple iPhone Websites dar?

Das iPhone nimmt die Website und schrumpft sie. Die Inhalte werden nicht – wie bei vielen anderen mobilen Endgeräten – linearisiert oder vereinfacht. Man sieht das Original-Layout in einer Art "Totalen". Das bedeutet: Zum Lesen und Klicken muss man erst reinzoomen, was mit dem Daumen und Zeigefinger leicht funktioniert und Spaß macht.

1.2 Wie groß ist die sichtbare Fläche auf einem iPhone?

Im Hochformat: 320 x 356 Pixel.
Im Querformat: 480 x 208 Pixel.
Wenn man das iPhone dreht, drehen sich die Inhalte mit.

Die verschiedenen iPhone-Modelle haben natürlich eine unterschiedliche Auflösung. Hier gibts u.a. Display-Daten zu allen iPhone Modellen.

1.3 Wie zoomt das iPhone?

Wenn das iPhone eine Webseite öffnet, nimmt es einen 980 Pixel breiten Ausschnitt vom Original-Layout der Seite und schrumpft ihn auf auf eine Breite von 320 Pixeln. Ist die Website für 800×600 optimiert (und somit kleiner als 980px), schrumpft das iPhone diese (z.B. von 760px Breite) auf 251px und zeigt einen 69px breiten weißen Rand. Websites, die breiter als 980px sind, werden in der rausgezoomten Ansicht abgeschnitten und müssen horizontal gescrollt werden. Bei einem fluiden Layout wird die Website nicht geschrumpft, sondern ohne Zoom schlicht auf 320px zusammen geschoben.

2. Optimieren für Apple's iPhone

2.1 Kann ich dem iPhone eigene Stylesheets zuweisen?

Eigentlich nicht, denn das iPhone stellt ja laut Fernsehspot das "wirkliche" Internet dar. Da Safari 3 jedoch CSS3 unterstützt, können wir media queries verwenden. Mit media queries können ausgabegerätspezifische Eigenschaften angesprochen werden. Das iPhone ist ein Gerät, welches einen Bildschirm hat, der im Querformat 480 Pixel breit ist. Diese Eigenschaft wird mit der folgenden Angabe im Head angesprochen:

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

Wichtig an dieser Stelle: Das Smartphone von Apple lädt ALLE eingebetteten Stylesheets: Die optimierte CSS-Datei muss also als letztes im HTML-Head auftauchen!!!
Man kann dem Iphone keine CSS-Datei per <link rel="stylesheet" media="handheld"> zuweisen, da sich das iPhone nicht als Handheld ausgibt, sondern als Computer.

2.2 Wie kann ich dem iPhone mitteilen, dass es die Website nicht schrumpft (rauszoomt)?

Egal, wie breit man das Layout definiert (z.B. 100% oder 320px), das iPhone zoomt standardmäßig raus oder schiebt die Website zusammen. Aber auch hier gibt es eine Möglichkeit, das iPhone anzusteuern und zu kontrollieren. Der Safari iPhone-Browser kennt als Darstellungsgröße den so genannten Viewport. Im Head können entsprechende Angaben gemacht werden. Am einfachsten geht es so:

<meta name="viewport" content="width=320" />
So zeigt das iPhone die Website im Hochformat ohne Zoom.
<meta name = "viewport"
content = "width = 1100, <!—Seite auf 1100 Pixel skalieren-->
user-scalable = yes,  <!-- Darf der User zoomen? yes/no -->
initial-scale = 0.4,  <!-- Minimaler Skalierungsfaktor -->
maximum-scale = 1 <!-- Maximaler Skalierungsfaktor. Hier 100% = scharfe Pixeldarstellung -->
"/>

Vorher sollte die Website natürlich speziell für iPhone optimiert werden, damit mehr als ein riesengroßes Logo angezeigt wird. Über das Attribut "viewport" kann vieles eingestellt werden - nicht alles davon macht Sinn.
Texte sollten mindestens eine Schriftgröße von 18 Pixeln haben. So wird auch ohne zoomen eine optimale Lesbarkeit garantiert.

2.3 Textgrössenanpassung steuern

Wenn das Apple iPhone eine Seite lädt oder zoomt, wird die Textgrösse standardmäßig automatisch eingestellt. Dies kann per CSS überschrieben werden:

-webkit-text-size-adjust:none; /* Turn off font resizing */

2.4 Telefon Link

Mit den Methoden

<span class="tel">+49 (x)xxx - xxxxxx x</span>

und

<a href="tel:+49 (0)xxx- xxxxxx x">anrufen</a>

kann man eine Telefonnummer auszeichnen, sodas man diese direkt mit dem iPhone anwählen und anrufen kann.
Meine Test haben allerdings ergeben, dass 7 aufeinanderfolgende Zahlen vom Iphone bereits anklickbar und anrufbar sind.

2.5 WebClip für den Homescreen des Iphones

Das WebClip Icon wird auf dem Homescreen (Springboard) angezeigt, wenn man die Seite zu seinen Favoriten hinzufügt. Damit dort nicht ein Ausschnitt der Seite, sondern ein selbst defi-niertes Icon angezeigt wird, kann ein 60 x 60 px großes png oder jpg angegeben werden.

<link rel="apple-touch-icon" href="icon.jpg"/>

3. Bist du ein iPhone?

Man kann recht einfach herausfinden, ob ein Besucher mit dem iPhone die Seite besucht:

3.1 PHP

Um per PHP herauszufinden, ob die Seite mit einem iPhone oder iPod touch besucht wird, ist über eine einfache Prüfung des User Agents möglich:

if (stristr($_SERVER['HTTP_USER_AGENT'], ‘iPhone’)) {}

3.2 JavaScript

In JavaScript hat diese Funktion bisher bestens funktioniert

function isiPhone()
{
    return (navigator.userAgent.indexOf('iPhone') != -1);
}

3.3 Orientierung herausfinden

Um die aktuelle Orientierung des iPhones zu analysieren, kann folgende JS-Datei einge-bunden werden, die eine Klasse im Body je nach Orientierung setzt:

function updateOrientation()
{
  var orientation=window.orientation;
  switch(orientation)
  {
    case 0:
      document.body.setAttribute("class","portrait");
      break;
    case 90:
      document.body.setAttribute("class","landscapeLeft"); 
      break;
    case -90:
      document.body.setAttribute("class","landscapeRight");
      break;
  }
  window.scrollTo(0,1); // scroll down to hide statusbar
}
if (navigator.userAgent.indexOf('iPhone') != -1)
{
  addEventListener("load", function()
  {
    setTimeout(updateOrientation, 0);
  }
  , false);
}
window.onorientationchange=updateOrientation;

Per CSS kann dann auf diese veränderte Klasse "live" reagiert werden.
Dies ist mit folgendem CSS-Code möglich:

body[class="portrait"]
{
    background: red;
}

body[class="landscapeLeft"]
{
    background: blue;
}

body[class="landscapeRight"]
{
    background: black;
    color:white;
}

Kommentare:

Google+