Mobile Ansicht

Das eine Homepage auf Smartphones und Tablets separat designet werden muss, ist heute sehr wichtig. Es soll auch auf kleineren Geräten vernünftig aussehen.

Dazu kann in css die unterschiedlichen Eigenschaften aufgrund der Breite des Fensters, definiert werden. Wir definieren also eine Breite, bei der andere css Eigenschaften gelten. Dazu ein kleines Beispiel:

@media screen and (max-width: 480px) {
backgroundcolor: lightblue;
}

Dies bewirkt, dass unter 480px Breit, die Hintergrundfarbe hellblau dargestellt wird.

Es wird empfohlen, mindestens drei verschiedene Varianten einzubauen mit der beschriebenen css Variante.

Der Nachteil dieser Variante ist, die Geräte haben keine einheitlichen Größen und werden auch stets geändert. Deswegen kann es vorkommen, das auf einem Mobile Gerät nicht das gewünschte Design dargestellt wird.

Ich bin eher ein Fan der php Variante. Da kann ein Mobile Gerät erkannt werden. Wir können eine Ansicht für Geräte die nicht als Mobile erkannt werden erstellen und eine für Mobile Geräte. Mit php entscheiden wir, welche css Datei geladen wird.

Bei dieser Variante wird auch sichergestellt, dass Mobile Geräte erkannt werden.

Bei Mobile Versionen einer Homepage, kann es Schwierigkeiten geben. Eine davon ist, dass scrollen. Teilweise erlaubt der Browser das horizontale scrollen. Dies ist meistens jedoch nicht erwünscht. Um das zu fixen, gibt es natürlich viele Möglichkeiten.

Eine mögliche Option ist:

overflow-x: hidden; // hide horizontal

Diese Eigenschaft wird dem body übergeben.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.