Webseiten Optimierung fürs iPhone oder den iPod

Vor einiger Zeit schrieb ich bereits über das Einbinden von "mobilen Stylesheets" zur Optimierung von Webseiten für mobile Endgeräte. Mittlerweile sind einige Hürden hinzugekommen, aber auch einige neue Lösungen gefunden worden.

Was weiterhin hervorragend funktioniert sind die Methoden, die ich in meinem Artikel "Mobile Webseiten per Stylesheet" beschrieben habe. Mit einer PHP Abfrage den HTTP_USER_AGENT nach Hinweisen auf mobile Browser oder Geräte durchsuchen und entsprechend einen zusätzlichen Stylesheet einbinden oder nicht.

Bei einem neuen Kunden stieß ich jetzt allerdings auf ein neues Problem. Der Stylesheet war optimiert für ein Anzeige auf einem Display mit 480x320 Pixeln, aber beim Testen auf dem iPod erschien die Seite winzig klein. Das Problem: Der Zoom des Browsers war falsch eingestellt.

Durch die schnellen kleinen Fingergesten zum hinein- und herauszoomen war nicht mehr erkenntlich auf welcher Zoomstufe ich mich befand. Mit dem folgenden Befehl ließ sich das Problem in den Griff kriegen:

<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no">

Das Ergebnis ist, dass die Seite bei jedem Ladevorgang auf Standardgröße skaliert wird und dem Benutzer das eigenständige Skalieren untersagt wird. Natürlich kann man letzteren Wert aus Gründen der Barrierefreiheit auch erlauben. In dem Fall einfach das "no" durch "yes" ersetzen, oder den ganzen Teil "user-scalable" einfach weglassen.

Wer die automatische Textgrößenanpassung beeinflussen möchte, kann dies mit dem Befehl

-webkit-text-size-adjust:none;

tun. Grundsätzlich macht es Sinn sich mit den webkit Befehlen auseinanderzusetzen, die die Anzeige auf mobilen Safari Browsern beeinflusst. Eine schöne Übersicht findet ihr hier. qooxdo WebKit CSS Styles

Ein weiterer spannender Befehl ist außerdem der Telefon-Link, mit dem man Telefonnummern im iPhone automatisch wählbar machen kann.

<a href="tel:0211-1234565">0211-123456</a>

Beim Gebrauch solcher Links sollte man natürlich vorsichtig sein, denn es ist ein leichtes hier Phishing zu betreiben und in den Link eine andere Nummer zu schreiben als in den Linktitel. So kann man schnell im Glauben sein eine Ortsvorwahl gewählt zu haben, aber tatsächlich über eine 0900er Nummer mit einer Hotline in der Karibik verbunden werden :)