Sie möchten gerne Ihre Webseite responsive gestalten ?
Als erstes definiert man im Kopfbereich, dem so genannten „<head>-tag“ der Webseite den Meta Viewport (Einsteigerinfos zu Meta Viewport). Diese eine kleine Zeile Code sorgt dafür, dass die Seite auf mobilen Endgeräten korrekt skaliert.
Was ist der „meta viewport“ ?
Die Browser der mobilen Geräte gehen zuerst mal davon aus, dass die Webseite nicht für mobile Geräte angepasst ist.
Also, dass die Webseiten-Breite an die Bildschirm-Breite angepasst werden muss. Z.B. bei einem Smartphone oder Tablet an ein viel kleineren Bildschirmbereich.
Um dem Browser mitzuteilen, dass es mobile Webseiten Versionen gibt, dafür gibt es die Funktion „meta vieport“.
Allein durch den Befehl wird die Webseite natürlich nicht responsive. Es müssen für mobile Ansichten (für Smartphone, Tablet usw.) auch noch mobile Versionen erstellt werden, sonst können diese natürlich nicht angezeigt werden, wen sie gar nicht vorhanden sind.
Das erstellen eines Anzeige-Ports („view port“) ist nur der erste Schritt, um den Browser mit zu teilen, es gibt mobile Versionen.
Ohne diesen Befehl würden Browser wie Safari, Chrome, Firefox, Opera etc. eine Webseite, die mobile Versionen hat, trotzdem nicht mobil anzeigen. Unten ein Beispiel einer mobilen Webseite, einaml mit dem Befehl und einmal, wenn der Befehl „view port“ fehlt.
Der view Port Befehl wurde eingesetzt: Die verschieden Browser können jetzt erkennen das die Webseite für mobile Geräte verfügbar sind
