HTML5 in der mobilen Webentwickung - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 51

Die Zoomstufe festlegen
Auf Smartphones wird Sharky's WebApp etwas zu klein angezeigt. Das liegt an der
Zoomstufe, die Sie auf den Faktor »1« festlegen sollten. Setzen Sie dazu folgende Zeile
Code in den head -Bereich der HTML-Datei:

2

<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=0">

Die Überschriften lesbar machen
Die rote und die blaue Überschrift wirken auf dem dunklen Hintergrund schwer les-
bar. Entfernen Sie deshalb die Klasse sharky der zweiten Überschrift, und passen Sie
in der CSS-Datei die h1 -Defintion so an, dass alle Überschriften in Weiß dargestellt
werden.

h1 {
font-size: 20px;
color: #fff;
}

Seitenränder
Damit Kopf- und Fußzeile ihrem Namen gerecht werden, sollten diese bis an den
Rand des Bildschirms reichen. Um dies zu erreichen, setzen Sie ebenfalls in der body -
Definition die Ränder über padding und margin auf 0:

body {
background-image:url(../bilder/denim.jpg);
color:#fff;
font-family: "Helvetica";
margin:0px;
padding:0px;
}

Allerdings klebt jetzt der Text im Inhaltsbereich auch am Bildschirmrand, was die
Lesbarkeit verringert. Geben Sie dazu dem article über margin noch etwas äußeren
Rand, 10 Pixel sollten genügen. Platzieren Sie folgenden Code vor dem Media Query
@media :

article {
margin:10px;
}