Sizeaware CSS

Mit dem Aufkommen internetfähiger Smartphones wird auch der Wunsch, dass die Webseite auch auf diesen Geräten anständig aussieht, immer größer. Für Wordpress Blogs gibt es da 2 Möglichkeiten.

  1. man verwendet ein spezielles Theme, dass man via einem Plugin in Wordpress läd. Dieses Theme “springt dann an” sobald man mit einem iPhone (o. Ä.) auf die Seite Surft
  2. man passt das eigene Theme an, so dass es für verschiedene Bildschirmgrößen verschiedene Layouts verwendet

Ein

@media screen and (max-width: 400px) {
*{ background-color: white; color: black; }
}

beispielsweise macht bei Fenstergrößen von max 400px die Hintergrundfarbe weiß und die Schriftfarbe schwarz. Zusätzlich sollte man mit dem Metatag

<meta name = "viewport" content = "initial-scale=0.85, width = 370, user-scalable = no">

Noch festlegen wie breit das “Fenster” auf dem iPhone sein sollte, ob die Webseite zoombar ist und was die Ausgangszoomstufe ist.