HTML and CSS Reference
In-Depth Information
body { color: white;
background-color: #000000;
font family: Arial;
font size: 12px;
}
#imageContainer {
background: url('stairs.jpg') no repeat top center;
height: 267px;
width: 400px;
}
In der Datei
landscape-style.css
setzen Sie die Hintergrundfarbe auf Schwarz und sorgen
auch mittels der
height
- und
width
-Attribute für eine größere Darstellung des Bilds.
Der HTML-Code für das kleine Beispiel:
<html>
<head>
<title>Rotationsbeispiel</title>
<meta name "viewport" content "width device width; initial scale 1.0;
maximum scale 1.0; user scalable 0;" />
<link rel "stylesheet" media "all and (orientation:portrait)"
href "portrait style.css" />
<link rel "stylesheet" media "all and (orientation:landscape)"
href "landscape style.css" />
</head>
<body>
<div id "imageContainer">
</div>
</body>
</html>
Das Ergebnis ist: Hält der Benutzer sein Telefon hochkant, wird nur ein kleines Bild
geladen und auf weißem Hintergrund dargestellt. Sobald der Benutzer sein Telefon in
das Querformat dreht, wechselt sofort die Hintergrundfarbe, und das Bild wird wesent-
lich größer dargestellt.
Bild 1.46:
Die Ansicht im
Hoch- und im Querformat.
