Es gibt zwei möglichkeiten um eine Webseite auf mobilen Geräten anzuzeigen. Die erste ist die mobile Anzeige und wird von Grund auf mit eigener CSS-Programmierung gestaltet. Der HTML-Editor liest die Pixelgröße des Geräts aus und folgt der Weiche zum CSS-Link.
Die zweite möglichkeit ist das responsive Design, wobei sich die Webseite den vorhandenen Pixeln anpasst. Das kann ein fließender Prozess sein z.B durch Prozentangaben:
#wapper: {width: 1000px;}
wird dann zu
#wapper: {width: 80%}
Die ID wapper zeigt dann eine Breite von 80% an, egal ob auf dem Handy mit 720 Pixeln oder einen Monitor mit 1920 Pixeln. Natürlich muß sich der Inhalt der Umgebung anpassen. Darum sollten alle angaben in Prozenten angegeben werden:
img {
height: auto;
max-widht: 100%;
}
Oder durch Mediaqueries den CSS-Code beeinflussen.
Nachteil des responsiven Designs ist dass der ganze Code der Webseite geladen wird, bei der mobilen Version wird nur der dafür benötigte Teil der CSS geladen.