Viewport

Was ist ein mobiler Viewport?

Am wichtigsten ist, dass dies ein Meta-Tag ist, nach dem Google sucht und verwendet, um festzustellen, ob Ihre Website Mobile Friendly ist. Wenn Google dieses Meta-Tag nicht findet, werden Sie den Google Mobile Friendly-Test nicht bestehen, was sich negativ auf Ihre Positionierung in den Ergebnissen der mobilen Suche auswirken kann.

Was der mobile Viewport leistet

Aus funktionaler Sicht stellt der mobile Viewport die anfängliche Zoomstufe einer Webseite ein, wenn sie mit einem mobilen Gerät betrachtet wird. Ohne Ansichtsfenster rendern mobile Geräte die Seite mit einer typischen Desktop-Bildbreite, skaliert auf den Bildschirm. Das bedeutet, dass Ihre Website, wenn sie auf einem Mobiltelefon betrachtet wird, einfach eine winzige, unleserliche Version Ihres Webseitenlayouts ist. Der mobile Ansichtsfenster sollte sich auf jeder Seite Ihrer Website im Kopfbereich befinden.

Ein wichtiger Aspekt zu verstehen ist, dass der mobile Viewport-Meta-Tag von Desktop-Browsern ignoriert wird. Das Einfügen dieses Meta-Tags ändert nichts an der Desktop-Ansicht Ihrer Website.

Der Mobile Viewport ist am nützlichsten, wenn er in einem ansprechenden Website-Design-Schema verwendet wird.

Mobiler Ansichtscode

Der grundlegende oder standardmäßige Verwendungscode für ein mobiles Viewport-Meta-Tag lautet wie folgt:

<meta name=viewport content=”width=device-width, initial-scale=1″>

Die Einstellung content=”width=device-width” weist die Seite an, die Breite des Bildschirms in geräteunabhängigen Pixeln anzupassen. Wie bereits erwähnt, ist dies besonders nützlich bei reaktionsschnellen Designs, da dies es der Seite ermöglicht, Inhalte an unterschiedliche Bildschirmgrößen anzupassen und sich an die Ausrichtung eines Telefons, Hoch- oder Querformat anzupassen.

Die Einstellung “initial scale=1” weist den Browser an, einen anfänglichen Zoommaßstab von 1:1 zwischen den geräteunabhängigen Pixeln und den CSS-Pixeleinstellungen zu verwenden. Dies ermöglicht es dem Benutzer auch, die Zoomstufe nach dem Laden der ersten Seite zu steuern.

Erweiterte Einstellungen – Max. Zoom

Es ist möglich, die minimale und maximale Zoomstufe einer Webseite einzustellen und die Möglichkeit des Benutzers, eine Seite zu zoomen, vollständig auszuschließen. Dies können nützliche Funktionen in einigen Fällen sein, in denen Sie die Displaygröße steuern müssen, aber nicht typischerweise verwendet und normalerweise nicht empfohlen werden. Es ist auch möglich, das Ansichtsfenster auf eine feste Breite einzustellen, was nützlich sein kann, wenn eine Webanwendung für ein bestimmtes Gerät erstellt wird, z.B. in einem kommerziellen Umfeld. Eine weitere Möglichkeit kann sein, wenn eine Website nicht mit einem reaktionsschnellen Design erstellt wird, sondern stattdessen über einen separaten mobilen, reinen Satz von Seiten verfügt.