Webtechnik

Tipp: CSS-Datei für mobile Webseiten einbinden

28.6.2012 von Bodo Ehrlichmann

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

ca. 0:40 Min
Ratgeber
CSS für mobile Webseite
CSS für mobile Webseite
© Herseller/Archiv

Geben Sie in der Referenz des Stylesheet-Dokuments media="handheld" an.

<link rel="stylesheet" href="handheld.css" type="text/ css" media="handheld" />

Das ist die einfachste Möglichkeit, die Darstellung der Webseiten auf Handhelds, Smartphones und Tablet-PCs zu berücksichtigen. Angaben wie Seitenbreite, Textfluss und die Größe und Darstellung von Inhalts- und Bildcontainern passen Sie hier an die geringere Auflösung und die Display-Größe an.

Insbesondere feste Spaltenbreiten sollten Sie hier durch Auto- oder Prozent-Angaben ersetzen, da die Größe der Displays und deren Auflösung stark variiert.

Schwierig wird es bei den Bilddateien, die direkt als Grafik im Content- Bereich der Seite integriert sind. Die Darstellungsgröße können Sie hier zwar auch über die CSS-Datei verringern, allerdings wird das Bild trotzdem in der Originalgröße geladen. Gerade das wirkt sich negativ auf die Ladezeiten aus, die beim Einsatz der Mobilgeräte unterwegs und ohne Netzwerkverbindung eine große Rolle spielen.

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…

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…

Mobile Webseite Skalierung

Webtechnik

Tipp: META-Tags für mobile Webseiten

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…

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…