Konzeption und Gestaltungsprinzipien - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 113

Modus zum Tragen kommt. Der einfachste Weg, dies zu tun, ist mit einem CSS-
Media-Query:

@media all and (orientation: landscape) {
…
}

3

Fügen Sie den @media -Selektor am Ende Ihrer CSS-Datei ein. Alle Eigenschaften, die
innerhalb des Selektors stehen, werden nur ausgeführt, wenn die Selektorbedingung
erfüllt ist, in diesem Fall also, wenn sich das Gerät in der Landscape-Orientierung
befindet. Alle zuvor definierten CSS-Regeln werden dabei überschrieben:

@media all and (orientation: landscape) {
header, aside {
display: none;
}
video {
height: 300px;
}
}

Mit display: none; verstecken Sie Titelzeile und Infobox in der Landscape-Orientie-
rung (Abbildung 3.29). Das Video setzen Sie mit 300 Pixel auf die genaue Höhe des
iPhones (abzüglich der Statuszeile), um es bildschirmfüllend darzustellen.

Abbildung 3.29 Landscape-Version ohne Titelleiste und Infobox

Genauso könnten Sie spezielle Regeln für den Portrait-Modus festlegen, der Media
Query dafür ist @media all and (orientation: portrait) . Erklären Sie eine Ausrich-
tung zum Standard, und legen Sie anschließend mit einem Media Query spezielle
Regeln für die andere Ausrichtung fest.