2. Web-Apps – das CSS Stylesheet einbinden

Mit HTML5 und CSS lässt sich der Look eines nativen iPhone Apps komplett nachstellen.  In diesem Tutorial lernen Sie alles über die CSS-Stile, Border-Radius und Seitenskalierung, um professionelle Web-Apps am Beispiel des iPhones zu erstellen.

Ein Stylesheet für das iPhone

Sie sollten für jedes mobile Endgerät, dass Sie gezielt bedienen möchten, ein separates Stylesheet schreiben. Beginnen kann man dabei natürlich mit einem einzigen – wir tun das mit einem Stylesheet für das iPhone mit den hier typischen Maßen und Stilen. Dieses Stylesheet lässt sich dann schnell anpassen, um z.B. für das iPad oder andere mobile Endgeräte die gleichen Ergebnisse zu erzielen.

Die gezielte Einbindung gelingt über den gewohnten Tag und spezifischer <link> Angabe:

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

entsrechend sollte für den normalen PC-Browser das Stylesheet so eingebunden werden:
<link rel="stylesheet" type="text/css" 
href="standard.css" media="screen and (min-width:481px)">

Der Internet Explorer versteht erweiterete Argumente nicht; daher benötigen wir für Ihn den folgenden conditional comment:
<!--[if IE]>
   <link rel="stylesheet" type="text/css" href="ie.css" media="all">
<![endif]-->

Skalierung der Seite

Der mobile Safari-Browser, dier im iPhone zum Einsatz kommt, nimmt standardmäßig beim Browsern eine Seitenbreite des angelieferten HTML-Dokuments von 980px an. Unsere Web-App würde als im Verhältnis zu dieser Seitenbreite auf weniger als die Hälfte geschrumpft erscheinen. Um das zu vermeiden, kann man einen Head-Tag hinzufügen:

<meta name="viewport" content="user-scalable-no, width=device-width">

Alleine durch diese Zeile ist jede Website in der Usability für mobile Endgeräte bereits extrem verbessert, weil so der Inhalt von Anfang in der richtigen Größe angezeigt wird.

Weiter zu „Das iPhones Stylesheet

Dieser Beitrag wurde unter Apps programmieren abgelegt und mit , , , , , , , , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

7 Antworten auf 2. Web-Apps – das CSS Stylesheet einbinden

  1. Pingback: Apps programmieren Teil1: Grundlagen | html5 Referenz und Tutorials | Neuerungen | CSS 3 | Anleitung zum Programmieren von iPhone Apps

Schreibe einen Kommentar

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