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

  2. Andi sagt:

    Super Tutorial – Besten Dank! Kleine Anmerkung, um das Skalieren/Zoomen des Users zu verhindern muss der meta tag user-scalable gleich (=) ’no‘ sein, sprich:

    content=“user-scalable=no, width=device-width“

    siehe auch:
    http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

    Gruss

  3. DerUser sagt:


    content=“[…]user-scalable-no […]“
    […]Alleine durch diese Zeile ist jede Website in der Usability für mobile Endgeräte bereits extrem verbessert
    […]

    Der normale iPhone-user ist das ‚zoomen-können‘ aber sowas von gewöhnt. Das darf man höchstens am Ende des ganzen Entwicklungsprozesses ausstellen, wenn nach mehreren usability-Tests Nutzer sich wohl fühlen und alles finden.

    Solang die Seite nicht perfekt ist, frusriert die zoom-Blockade iphone-user und diese wollen dann nur noch zur ’normalen‘ Seite. Also FINGER WEG bei normalen Websites.

    • admin sagt:

      Wir sprechen hier ausdrücklich von der Entwicklung einer Web App, die für Smartphones optimiert wurde. Der User soll in dem Fall weder Zoomen können (dann werden z.B. die Buttons plötzlich größer als die Seite) noch Zoomen WOLLEN.
      Aber auf „normalen“ Websites ist das natürlich nicht die Lösung.

  4. Maria sagt:

    Hier hat sich ein kleiner Tippfehler eingeschlichen: vor device-width fehlte ein Anführungszeichen … 😉

    • html5-admin sagt:

      nein, klingt komisch – ist aber so: die zwei Argumente werden durch Komma getrennt dem Attribut content zugewiesen. Es stimmt also:
      <meta name="viewport" content="user-scalable-no, width=device-width">

Schreib einen Kommentar

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