Wie sieht meine Homepage auf dem iPhone aus?

Relativ häufig wird an mich die Frage herangetragen, ob es eine Möglichkeit gibt, die Darstellung der eigenen Homepage im iPhone zu simulieren. Scheinbar ist es gerade für Webdesign-Neulinge reizvoll, eine Bestätigung zu bekommen, dass die selbst entwickelte Homepage auch auf dem iPhone “funktioniert”. Meiner Meinung nach macht aber das reine Austesten mit einem Simulationsprogramm wenig Sinn. Vielmehr sollten zumindest rudimentäre Kenntnisse darüber vorhanden sein, nach welchen Regeln der iPhone-Browser eine Homepage auf dem recht kleinen Display darstellt und wie man als Webdesigner gegebenenfalls darauf Einfluss nehmen kann.

Wie das iPhone Websites darstellt

In einer HTML-Datei ist es möglich, verschiedene CSS-Dateien für unterschiedliche Ausgabemedien einzubinden. So ist es beispielsweise denkbar, ein Stylesheet für die Ausgabe auf gewöhnlichen Monitoren und ein anderes speziell für die Ausgabe auf dem Drucker zu optimieren. Wer hier bereits auf dem Schlauch steht, sollte noch einmal in meinen CSS-Lehrgang die Seiten 94 bis 99 durcharbeiten.

Eine Besonderheit beim iPhone besteht nun darin, dass es die eigentlich passende Referenzierung media=”handheld” ignoriert und statt dessen die Angaben zu media=”screen” verwendet. Insofern übernimmt der iPhone-Browser (Safari) das Layout vom normalen (großen) Standardbldschirm und skaliert es. Die hierfür zur Verfügung stehende sichtbare Fläche betragt:

  • Im Hochformat (Portrait-Mode): 320 x 480 Pixel.
  • Im Querformat (Landscape-Mode): 480 x 320 Pixel.

Allerdings handelt es sich bei diesen Werten noch nicht um den sog. websicheren Browserbereich. So bleibt nach Abzug von Safaris Bedienelementen nur noch folgende Fläche übrig:

  • Im Hochformat: 320 x 356 Pixel.
  • Im Querformat: 480 x 208 Pixel.

Da sich das iPhone wie gesagt nicht mit dem Keyword handheld ansprechen lässt, besteht eine andere Möglichkeit, eine für das kleine Display optimierte CSS-Datei zu referenzieren. Konkret erfolgt dies mit den Media Queries Keywords only in Kombination mit screen im head der HTML-Datei.

Öffnet man eine Website, nimmt Safari als Standardwert einen 980 Pixel Breiten Ausschnitt und verkleinert ihn auf eine Breite von 320 bzw. 480 Pixel. Ist die Seitenbreite kleiner als 980 Pixel, bleiben die Proportionen erhalten, jedoch wird die fehlende Fläche mit einem weißen Rand aufgefüllt. Ist hingegen die Seitenbreite größer als 980 Pixel, wird ein Teil abgeschnitten und der Betrachter muss horizontal scrollen. Als Entwickler eine Homepage hat man die Möglichkeit, durch den Viewport meta tag Einfluss auf die Darstellungsgröße zu nehmen. Notwendig ist dies zumindest immer dann, wenn die Breite der Homepage deutlich von der des Standard-Viewports abweicht. Insbesondere schmale Seiten werden durch die Skalierung unnötig klein dargestellt. Um den Viewport zu manipulieren, müssen Sie lediglich einen Parameter bestimmen (Höhe, Breite oder Skalierungsfaktor), die übrigen Werte leitet Safari automatisch aus dieser Vorgabe ab. Die möglichen Viewport-Parameter können Sie im Safari Dev Center nachlesen.

Neben der der Anpassung des Viewports findet häufig eine Änderung der Textgröße statt. So versucht der iPhone-Safari automatisch, enthaltenen Text auf eine vernünftig lesbare Größe zu bringen. Falls der Versuch misslingt, besteht die Möglichkeit, mit der Eigenschaft -webkit-text-size-adjust diese Automatik abzuschalten. Alternativ lässt sich auch ein Vergrößerungsfaktor verbindlich definieren.

Ob sich er Aufwand für eine solche Optimierung lohnt, lässt sich freilich erst beantworten, wenn man weiß, wie die eigene Homepage auf dem iPhone tatsächlich aussieht. Nachdem also nun prinzipiell geklärt ist, wie der Browser die Seiten an die Gegebenheiten des kleinen Displays anpasst, können wir uns nun der Beantwortung der Ausgangsfrage widmen.

iPhone Darstellung simulieren

Wer selbst kein iPhone besitzt, muss sich mit Simulatoren oder Emulatoren behelfen. Erster Anlaufpunkt ist der iPhone Simulator von Apple, auf den ich bereits in einem Artikel über das iPad hingewiesen habe.

Voraussetzung ist allerdings, dass man über Mac OS Betriebssystem verfügt. Unter Windows lauffähig ist hingegen der iOS Web Browser Simulator iBBDemo.

Abzuraten ist in jedem Fall von Online-Diensten wie TestiPhone.com und iPhone-Tester, da diese nicht die Engine des mobilen Safari verwenden. Wenn überhaupt sollte man diese Seiten mit dem Safari aufrufen.

Wer doch lieber als Testsuite ein echtes iPhones hätte, jedoch die Anschaffungskosten scheut, sollte Ausschau nach einem gebrauchten iPod Touch halten. Das Gerät basiert auf der Technik des iPhones, kann aber deutlich günstiger erstanden werden.

Über Jens Kilgenstein

Ich bin seit über zehn Jahren im Bereich Webdesign tätig und betreue seitdem kleine und große Kunden bei der Konzeption und Umsetzung von Webprojekten. → Zum Profil

,

Ebenfalls Lesenswert:

Eine Reaktion zu Wie sieht meine Homepage auf dem iPhone aus?

  1. Jens 15. Oktober 2012 at 12:17 #

    Hallo,
    ich bin gerade dabei meine erste Website für mobile Geräte zu erstellen, da bin ich über Google auf deinen Artikel gekommen. Super erklärt! Mir hat’s viel geholfen, danke für deine Mühe!
    Viele Grüße aus Stuttgart,
    Jens

Hinterlasse eine Antwort