{

Tobias Scheible
Autor, Referent & IT-Sicherheitsexperte
Meta-Tag

Datum: Donnerstag, 02. Mai 2013

Autor: Tobias Scheible

Kommentar(e): 6 Kommentare

Kategorie: Aktuelles

Tags: Smartphone, html, Responsive Webdesign, Mobile Web, Mobile, Tabelt

Mobile Viewport – Smartphones & Tablets

Normalerweise werden Websites auf Smartphones skaliert dargestellt. Mit dem “viewport” Meta-Tag lässt sich die Standard-Skalierung beeinflussen und die Möglichkeiten der Benutzer können gesteuert werden.

Eine normale Desktop Version einer Website wird auf einem Smartphone so skaliert, dass sie in der Breite komplett sichtbar ist. Damit sieht der Besucher die komplette Website und kann in die Website hinein zoomen. Die Website kann bis zu viermal so groß wie normal gezoomt werden. Das Vorgehen ist genial, um normale Desktop Websites auf dem Smartphone zu betrachten. Dabei wird auch noch ein virtueller Anzeigebereich verwendet, der der Website eine höhere Auflösung simuliert. Allerdings möchte man manchmal dieses Verhalten steuern und zum Beispiel die Skalierung bei einer speziellen mobilen Version einer Website ganz deaktivieren. Und das geschieht über die Parameter des “viewport” Meta-Tag.

<meta name="viewport" content="[Parameter]">

Ursprünglich wurde es von Apple mit dem mobilen Safari eingeführt, wird allerdings mittlerweile von vielen anderen mobilen Web-Browsern auch unterstützt. Die nachfolgende Parameter können gesetzt werden:

width

Bestimmt die Breite des virtuellen Anzeigebereichs, wobei der Standardwert 980 Pixel beträgt. Es kann entweder ein Wert zwischen 200 und 10.000 Pixel oder die Konstante “device-width” angegeben werden.

<meta name="viewport" content="width=800">
<meta name="viewport" content="width=device-width">

height

Bestimmt die Höhe des Anzeigebereichs, wobei der Standardwert aus dem Verhältnis zur Breite berechnet wird. Es kann entweder ein Wert zwischen 223 und 10.000 Pixel oder die Konstante “device-height” angegeben werden.

<meta name="viewport" content="height=600">
<meta name="viewport" content="height=device-height">

initial-scale

Bestimmt die Skalierung beim Aufruf einer Website. Der Standardwert wird aus der tatsächlichen Breite berechnet, so dass die Website komplett angezeigt wird. Der mögliche Bereich wird von den beiden Parametern minimum-scale und maximum-scale bestimmt.

<meta name="viewport" content="initial-scale=2">

minimum-scale

Bestimmt die kleinste Skalierungstufe. Der Standardwert beträgt 0.25 und kann von 0 bis 10 angegeben werden.

<meta name="viewport" content="minimum-scale=1">

maximum-scale

Bestimmt die größte Skalierungstufe. Der Standardwert beträgt 5 und kann von 0 bis 10 angegeben werden.

<meta name="viewport" content="maximum-scale=2">

user-scalable

Bestimmt, ob eine Website skaliert wird oder nicht. Der Standradwert ist yes.

<meta name="viewport" content="user-scalable=no">



Und hier noch ein paar Beispiele:

Eine Website, die nicht skaliert werden soll:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Eine Website, die für die Breite von 1024 Pixel optimiert worden ist:

<meta name="viewport" content="width=1024">

Eine Website, die in ihrer realen Größe dargestellt werden soll:

<meta name="viewport" content="initial-scale=1">



In der Dokumentation von Apple wird der ”viewport” Meta-Tag und noch weitere Apple-eigene Meta-Tag Konstrukte ausführlich erklärt. Im WordPress Video-Tutorial von Elmatudio ging es ebenfalls um den Viewport Meta-Tag und ebenso hat sich Patrick H. Lauke im Webkrauts Blog mit dem Thema ausführlich beschäftigt. Auf t3n wurden übrigens erst kürzlich 8 Tools vorgestellt, um mobile Websites zu testen.

  • Artikel teilen:

Über Tobias Scheible

Tobias Scheible

Tobias Scheible arbeitet als wissenschaftlicher Mitarbeiter an der Hochschule Albstadt-Sigmaringen. Dort ist er als Autor und e-Tutor im Masterstudiengang Digitale Forensik tätig und leite im Bachelorstudiengang IT Security Praktika rund um das Thema Informationssicherheit. Darüber hinaus ist er Mitinitiator des Kompetenzzentrums Cyber Security Lab, welches Forschungsprojekte auf dem Gebiet der IT-Sicherheit koordiniert. Zusätzlich hält er Vorträge und Workshops zu aktuellen Themen der IT-Sicherheit.

Alle Blog-Artikel Website Facebook Twitter Xing

Kommentare

Britta

Ein toller, informativer Artikel, mit hilfreichen Tipps! So soll es sein! 😀
Gruß, Britta

Norbert

Sehr hilfreicher Artikel. Kannte diesen Viewport bis gerade gar nicht. Werde ihn gleich mal auf meine Seite einbinden und ausprobieren.

Heike

Nutze so Responsive Webdesign bereits eine Weile und find das hier nochmal gut übersichtlich zusammengefasst. 🙂

Find’s so skalierbares doch einen großen Ticken besser als extra mobil erstellte Websites. So muss man sich nur einmal um die Darstellung des Inhalts kümmern und nur ein wenig an die Breiten anpassen.

Marcel

Ein angepasstes Design für die mobile Ansicht hat aber auch Vorteile. So kann via CSS auch optimierte Grafiken eingebunden werden und somit verringert sich die Ladezeit auf dem mobilen Endgerät. Ist zwar mit LTE nicht mehr das Problem aber wer hat schon LTE 😉

Nick

Für mein neues Projekt habe ich erst letztens solch ein Responsive Webdesign verwendet und es kommt auch sehr gut bei den Leserinnen und Lesern an. Skalierbares ist auf jeden Fall um einigen besser, als wenn man sich extra mühe macht eine Mobile Website zu designen.

Lg
Nick

Timo

Ohne Mobile Viewport würde ich doch garkeinen Browser über mein Smartphone nutzen. Ich finde seid dem es eingeführt worden ist sehen die Seiten einfach viel besser aus!

Gruuß Timo

Schreibe einen Kommentar!

Hilfe zum Kommentieren

Um kommentieren zu können, geben sie bitte mindestens ihren Namen und ihre E-Mail-Adresse an. Bitte nutzen Sie die Kommentarfunktion nicht dazu, andere zu beleidigen oder Spam zu verbreiten. Trolle und Spammer sind hier unerwünscht! Unangemessene Kommentare, die zum Beispiel gegen geltendes Recht verstoßen oder eine Gefährdung anderer Besucher darstellen, werden gelöscht oder angepasst.

Name: Ihr Name, der oberhalb des Kommentars steht, gerne auch Ihren echten Namen, das erleichtert die Kommunikation für alle. Sollte ein Spam-Keyword als Name verwendet werden, kann dieses entfernt oder korrigiert werden.

E-Mail: Ihre E-Mail Adresse dient zur Identifizierung weiterer Kommentare und sie haben die Möglichkeit, ein Avatar-Bild zu verwenden. Dazu müssen Sie mit Ihrer E-Mail Adresse bei Gravatar angemeldet sein. Die E-Mail Adresse wird natürlich nicht veröffentlicht und nicht weitergegeben.

Website: Hier können Sie ihren eigenen Blog bzw. ihre eigene Website eintragen, dadurch wird Ihr Name und Ihr Avatar-Bild verlinkt. Werden rein kommerzielle Angebote offensichtlich beworben, setze ich den Link auf nofollow und unangemessene werden einfach entfernt.

Erlaubte HTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <hr> <big> <small> <sub> <sup> <u>

nach oben