Webtechnik

Tipp: META-Tags für mobile Webseiten

2.7.2012 von Bodo Ehrlichmann

Für die mobile Version einer Webseite gibt es spezielle META-Angaben. Wir sagen Ihnen, mit welchen Tags Sie Auflösung und Skalierung Ihrer Webseite auf mobilen Endgeräten steuern können.

ca. 0:45 Min
Ratgeber
Mobile Webseite Skalierung
Mobile Webseite Skalierung
© Hersteller/Archiv

Mit dem META-Tag viewport bestimmen Sie, in welcher Auflösung das mobile Gerät Ihre Webseite laden soll und steuern die mögliche Skalierung durch den Anwender. Durch die Angabe device-width wird automatisch die Display-Auflösung verwendet, die auf dem jeweiligen Gerät bereit steht.

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

Es ist auch möglich, feste Werte für Breite und Höhe anzugeben, sinnvoll ist das jedoch selten.

Zudem sind eine Reihe weiterer Werte möglich, die Sie Ihrer Webseite für die Darstellung mitgeben können:

initial-scale: automatische Skalierung beim Laden der Seite

user-scale: Skalierung durch den User zulassen oder verhindern

minimal-scale: geringste mögliche Skalierung durch den Anwender

Auch hier gilt jedoch, dass verschiedene Browser verschiedene Darstellungen haben und unterschiedliche Anweisungen benötigen. Die mobile Opera-Version etwa verwendet das Small Screen Rendering. Dadurch werden auch Webseiten, die keine speziellen Angaben für die Darstellung auf Smartphones und Pocket-PCs enthalten, angepasst und optimiert. Allerdings ignoriert Opera dadurch auch zum Teil gerade die META-Tags und CSS-Anweisungen die speziell hierfür gesetzt wurden.

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

Wordpress 3.4.1 erschienen

Sicherheitsupdate

Wordpress 3.4.1 erschienen

Rund 2 Wochen nach Veröffentlichung der Version 3.4 hat Worpress ein Update auf 3.4.1 nachgeschoben. Es behebt kleinere Fehler und ein mögliches…

CSS für mobile Webseite

Webtechnik

Tipp: CSS-Datei für mobile Webseiten einbinden

CSS-Dateien steuern das Aussehen einer Internetseite. Wir zeigen Ihnen, wie Sie diese Anweisungen speziell für mobile Endgeräte anpassen.

Wikipedia - Mobiles Internet

Webtechnik

Tipp: Mobile Version der Webseite bereitstellen

Eine eigene in der Darstellung angepasste Version der Webseite ist sehr aufwändig - aber effektiv. Wir zeigen Ihnen, wie Sie eine spezielle mobile…

Magix Xara Designer Pro X

Software

Magix Xara Designer Pro X - Foto, Druck und Web

Magix kombiniert unter dem Namen Xara Designer Pro X die beiden Programme Foto & Grafik Designer und Web Designer Premium. Damit liefert das Paket die…

Wordpress: Wir helfen bei der Installation und Anpassung von Themes.

Themes installieren & anpassen

WordPress-Themes - der große Ratgeber mit Tipps und Tricks

Themes sind Baukästen für jedes WordPress-Blog. Sie bestehen vor allem aus Templates und Stylesheets, die das Gerüst bieten für individualisierte…