📱

CSS für Mobil-Geräte


Webschema Micro-Daten

Zielgruppe sind StudentInnen und ambitionierte Informatik-Amateure

Grundkenntnisse von HTML und CSS werden vorausgesetzt.


ViewPort


Auf einem SmartPhone wird nur der Mobil-Test 2 passend angezeigt: Dort ist ein <meta name="viewport">-Element eingefügt.


Links ist eine besonders einfache Webseite eingebettet.
Sie ist so klein, dass sie problemlos auf den kleinen Bildschirm eines Smartphones passen würde.

Ohne besondere Maßnahmen wird jedoch auch eine winzige Webseite wie diese vom Smartphone verkleinert. Man muss sie nach dem Laden vergrößern, um sie anzusehen.

▶  Mit Klick auf diesen ↗ Link oder mit dem QR-Code wird die Mini-Webseite in einem eigenen Browser-Tab geladen.
▶  Mit Klick auf diesen Link wird der HTML+Javascript ↗ Quelltext in einem eigenen Browser-Tab angezeigt.
Ohne ViewPort


Diese Mini-Webseite sieht am PC-Bildschirm gleich aus. Wenn man sie jedoch mit einem Smartphone ladet, dann wird sie ohne weitere Maßnahmen in passender Vergrößerung geladen:

▶  Mit Klick auf diesen ↗ Link oder mit dem QR-Code wird die Mini-Webseite in einem eigenen Browser-Tab geladen.
▶  Mit Klick auf diesen Link wird der HTML+Javascript ↗ Quelltext in einem eigenen Browser-Tab angezeigt.
Mit ViewPort

Einziger Unterschied im HTML-Quelltext ist diese Anweisung:
<meta name="viewport" content="width=device-width"/>


Mit der oben gezeigten <meta>-Anweisung im HTML-Quelltext des 2.Beispiels wird der Browser angewiesen, zur Darstellung die aktuelle Breite des Bildschirms zu berücksichtigen.
Diese Anweisung muss im HTML <head>-Element enthalten sein.

  Das hat an einem PC-Bildschirm normalerweise keine Konsequenzen.

  An einem Smartphone wird die Webseite dagegen in brauchbarer Größe angezeigt. Allerdings kann sich die Breite (und damit auch die Darstellung) je nach Orientierung des Geräts (horizontal oder vertikal) ändern.



Der Bildschirm eines Smartphones ist so klein, dass man zur Anzeige immer den gesamten verfügbaren ViewPort verwendet.
Man kann Javascript-Programme daher verwenden, um den ViewPort zu messen und Layout und/oder Inhalt anzupassen.

In diesem Web wird derzeit eine Breite von 500 Pixeln als Grenze verwendet: Wenn entweder Breite oder Höhe kleiner sind, dann wird angenommen, dass es sich um ein Smartphone handelt.
Einige Demo-Beispiele werden alternativ in Smartphone-Versionen angeboten. Die meisten Seiten sind jedoch umfangreich und daher für Smartphones prinzipiell ungeeignet.

Relative Einheiten



  Relative Einheiten sind % (Prozent) und em ( Geviert-Breite,  Breite eines M‑Zeichens).

Die Angabe in % bezieht sich auf die jeweils (!) verfügbare Breite oder Höhe eines Elements. Man kann z.B. ein HTML <div>-Element mit 75% Breite angeben:
<div style="width:75%;">...</div>
 
Die Angabe in em eignet sich gut für die Schrift-Größe (font-size) und für Abstände (margin, padding).

Wenn man relative Einheiten verwendet, dann wird die Darstellung automatisch angepasst. Damit kann man viel Arbeit sparen oder in einfachen Fällen Webseiten herstellen, die ohne Änderung sowohl an einem PC als auch an einem Smartphone passend dargestellt werden.



Beispiel:
*{margin:0px; padding:0px; font-size:1em;}
Damit werden die Abstände aller (!) HTML-Elemente abgeschaltet und die Schrift-Größe aller (!) Elemente festgelegt.
Danach muss man allerdings Abstände und Schrift-Größe für jene Elemente, die anders dargestellt werden sollen, ausdrücklich angeben, z.B.
h1{margin:0.5em; font-size:1.25em;}


Wenn man in das <body>-Element ein <div>-Element mit 67% Breite einsetzt, dann nimmt dieses ⅔ der verfügbaren Breite des übergeordneten <body>‑Elements ein.

Wenn man in dieses Element ein weiteres Element mit 67% Breite einsetzt, dann nimmt dieses ⅔ der verfügbaren Breite des übergeordneten <div>‑Elements ein, das sind ⅔·⅔ = 44% der Breite des <body>‑Elements.
Das sieht innerhalb der Abmessungen dieses Kapitels ungefähr so aus:

Verfügbare Breite für dieses Element (rot umrandet)
<div style="width:67%;">
<div style="width:67%;">
</div>
</div>

Größe in em

Dieses relative Maß ist besonders gut geeignet, um Schriftgröße, Abstände und andere Maße anzugeben.

◀  Links ist eine Mini-Webseite eingebettet, in welcher Text mit unterschiedlichen Einheiten formatiert ist.

Ergebnis:
Die meisten Browser formatieren die relative Standard-Größe von 1.0em ungefähr nach dieser Faustregel:
1 em ≈ 12 pt
Die Größe in px variiert je nach → Auflösung des Bildschirms:
1 em ≈ 12 px @ 72 dpi
1 em ≈ 16 px @ 96 dpi
1 em ≈ 24 px @ 144 dpi

Abstände:
Für das <body>-Element ist im Demo-Beispiel ein Innen-Abstand (padding) von 2% definiert.
Für die 4 <div>-Elemente wurde jeweils ein blauer Rand (border) von 0.1em Stärke, ein Außen-Abstand (margin) von 0.5em und ein Innen-Abstand (padding) von 0.5em definiert.
Die Verwendung relativer Einheiten garantiert, dass die Ansicht der Testseite auf PC und Smartphone ohne weitere Maßnahmen brauchbar und vergleichbar ist.

Mit Klick auf diesen ↗ Link oder mit dem QR-Code wird die Mini-Webseite in einem eigenen Browser-Tab geladen.
▶  Mit Klick auf diesen Link wird der ↗ HTML+CSS Quelltext einem eigenen Browser-Tab angezeigt.
Schrift-Größe


Das Zeichen 'MobilePhone' wird korrekt (und evtl. bunt) angezeigt, wenn es in der verwendeten → Schrift-Familie enthalten ist. Das ist bei den meisten von modernen Betriebssystemen verwendeten Schrift-Familien der Fall, jedoch nur selten bei Sonder-Schriften.

Das Zeichen enthält allerdings viele Details und wird in vielen Schrift-Familien bei Verkleinerung nicht vereinfacht. Deshalb verwendet man es am besten nur mit großer Schrift-Größe, z.B. im Beispiel links mit font-size:4em;

Layout


Heute verwendet man am PC nicht den ganzen Bildschirm für ein Programm sondern mehrere Fenster unterschiedlicher Größe. Auf Smartphones wird weiterhin der gesamte (winzige) Bildschirm verwendet, die Orientierung (hoch- oder quer) kann sich jedoch während der Anwendung ändern.


2. Generation: Textverarbeitung

Die (teuren) PC der ersten Generation wurden hauptsächlich für Textverarbeitung und Tabellen-Kalkulation eingesetzt. Es war ein großer Fortschritt, dass der Zeilen-Umbruch automatisch erfolgte. Auch die ersten Webseiten passten sich selbstverständlich der Größe des jeweiligen Bildschirms an.

Mit dem Einzug von PC und Nadeldrucker wurde erstmals eine Textverarbeitung im heutigen Sinne möglich. Auch die ersten Webseiten passten sich automatisch an die Bildschirme an.


4.Generation: Flexibles Layout


Heutige Webseiten müssen sich an die Dimensionen des jeweils verwendeten Fensters flexibel anpassen.


Die modernen Anforderungen an ein flexibles Layout werden u.a. mit ↓ CSS-Flex und ↓ CSS-MediaQuery programmiert.
Mit Flex gibt man die allgemeine Gestaltung des Layouts vor, mit MediaQuery kann man je nach den realen Bedingungen unterschiedliche Regeln anwenden, insbesondere eines von mehreren Flex-Layouts.

CSS Flex + MediaQuery Technologie


In diesem Kapitel werden 2 Beispiele vorgestellt. Beide sollten auf die Breite ihres Fensters sinnvoll reagieren:
Das 2.Beispiel 'MediaQuery' verzichtet auf Flex, funktioniert dafür jedoch mit allen gängigen Browsern. Es ist allerdings wesentlich aufwändiger, damit ein flexibles und trotzdem halbwegs reproduzierbares Layout zu programmieren.



Bei kleiner Fenster-Breite <400px werden die beiden Boxen mit rotem Rand in jeweils voller Breite formatiert.
Wenn die begrenzte Höhe überschritten wird, dann wird ein vertikaler Rollbalken (ScrollBar) angezeigt.

Wenn die Breite >400px ist, dann werden beide Boxen mit blauem Rand nebeneinander angezeigt. Ihre Größe wird an die volle Breite angepasst.

Wenn die Breite >600px ist, dann werden die Boxen mit grünem Rand angezeigt. Ihre Breite wird begrenzt, und der verbleibende Platz automatisch aufgeteilt.


Die Kombination Flex + MediaQuery ist Stand der Technik: Die Programmierung ist einfach, klar und übersichtlich, das Ergebnis ausgezeichnet. Allerdings wird diese Technologie noch nicht von allen Browsern unterstützt (→ Test).

▶  Mit Klick auf diesen Link wird der HTML+CSS Quelltext in einem eigenen Browser-Tab angezeigt.
Beispiele zur → Flex-Programmierung
Flex+MediaQuery



Bei kleiner Fenster-Breite <400px werden die beiden Boxen mit rotem Rand in jeweils voller Breite formatiert.
Wenn die begrenzte Höhe überschritten wird, dann wird ein vertikaler Rollbalken (ScrollBar) angezeigt.

Wenn die Breite >400px ist, dann werden beide Boxen mit blauem Rand nebeneinander angezeigt. Ihre Größe wird an die volle Breite angepasst.


Die Kombination Flex + MediaQuery ist Stand der Technik: Die Programmierung ist einfach, klar und übersichtlich, das Ergebnis ausgezeichnet. Allerdings wird diese Technologie noch nicht von allen Browsern unterstützt (→ Test).

▶  Mit Klick auf diesen Link wird der HTML+CSS Quelltext in einem eigenen Browser-Tab angezeigt.
Beispiele zur ↓ MediaQuery-Programmierung im nächsten Kapitel
MediaQuery

Programmierung von CSS Media Query


Mit MediaQuery kann man für alle CSS-Regeln Bedingungen angeben. Diese Technologie wird von allen modernen Browsern unterstützt.



<article>
Text...
</article>
<article>
Text...
</article>



<style type="text/css">
article{float:left; width:45%;}
</style>



@media (max-width:400px) {
article{float:none; width:96%;}
}



In den meisten Fällen (und in den hier gezeigten Beispielen) werden bedingte Regeln an die Breite des Fensters geknüpft.

Man kann die Anfangs-Regeln für ein schmales Fenster formulieren. Dann folgen eine oder mehrere Bedingungen für größere Breite, z.B. (in dieser Reihenfolge):
@media (min-width:300px) {...}
@media (min-width:600px) {...}
@media (min-width:900px) {...}

Alternativ kann man zuerst Anfangs-Regeln für ein breites Fenster formulieren. Dann folgen Bedingungen für kleinere Breite, z.B. (in dieser Reihenfolge):
@media (max-width:900px) {...}
@media (max-width:600px) {...}
@media (max-width:300px) {...}

Trennung nach Medien


Dieser Ansatz verzichtet auf ↑ Media Query und andere Technologien zur Bedingten Formatierung:
Alle Webseiten werden getrennt verwaltet und ohne Kompromisse für das jeweilige Medium optimiert.


Nachteile

Man muss für jedes Medium ein gesamtes Web verwalten. Jede Änderung oder Ergänzung muss man für alle verwendeten Medien getrennt durchführen.

Dafür entfällt der Aufwand, jede Seite mit Verzweigungen für die Medien zu adaptieren: Man legt für jedes Medium nur die dazu passenden Themen im jeweils passenden Umfang an.

Interaktive Elemente (Links, Formular-Elemente) müssen für Smartphones größer und weiter voneinander entfernt sein.
Eine exakte Positionierung (des Mauszeigers) ist nur auf einem PC möglich oder erfordert auf Mobil-Geräten viel Programmier-Aufwand.

Es ist nicht leicht, Links zwischen verschiedenen Medien-Webs so zu verwalten, dass die Bedienung ohne Kommentar intuitiv erfolgen kann..


Dieses Web bietet vorwiegend umfangreiche und ausführlich kommentierte Webseiten. Diese sind nur mit einem PC-Bildschirm sinnvoll zu verwenden. Es wird daher kein Versuch unternommen, sie für Smartphones zu adaptieren.

Einige Seiten dienen der Übersicht und enthalten weniger Inhalt: Diese gibt es auch in vollkommen getrennten Mobil-Versionen.

Die Demo-Beispiele sind meist kompakt, portabel und zur Darstellung in beiden Medien geeignet. Sie werden schrittweise auch für mobile Geräte optimiert und mit ↓ QR-Codes zum einfachen Laden ausgerüstet.

SVG Objekt-Grafik


Daher wurden die meisten SVG-Grafiken dieses Webs in minimale Webseiten eingebettet:
  HTML-5 lässt sich mit den ↑ hier vorgestellten Methoden an Mobil-Geräte anpassen und erlaubt die direkte (→ Inline)-Einbettung von SVG-Elementen.


Einbettung der gleichen ObjektGrafik in eine Mini-Webseite
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="50" cy="50" r="20" fill="red"/>
</svg>
</body>
</html>


Beispiel:  Mini-Webseite mit eingebetteter Grafik:
Mit Klick auf diesen ↗ Link oder mit dem QR-Code wird die Mini-Webseite in einem eigenen Browser-Tab geladen - mit Mobil-Geräten in gleicher Größe wie auf dieser Seite.
HTML+InLine-SVG

Links



Der Browser eines SmartPhones sollte möglichst wenige Fenster verwalten, am besten nur 1 einziges.
In diesem Fall öffnet man die Ziele von HyperLinks vorzugsweise im gleichen Fenster. Dazu lässt man das target-Attribut weg oder gibt ihm den Wert _self
In diesem Web werden alle Links im gleichen Fenster geöffnet, wenn Breite oder Höhe des Bildschirms <500 Pixel ist.



QR-Code mit Link zum Thema
QR-Code bei Wikipedia