Mobile Endgeräte

Mehr als die Hälfte der Webzugriffe kommt von Handys. Das Gute: Der normale Fluss, auto-fit und Container Queries haben uns schon viel Arbeit abgenommen. Hier kommt der Rest.

Was du am Ende kannst

erklären, was das Viewport-Tag bewirkt
mit Mobile First und Media Queries arbeiten
Bilder passend zur Bildschirmgröße ausliefern
Touch-Bedienung berücksichtigen
im Gerätemodus der DevTools testen

Live-Coding zum Mitmachen

⤓ demo-18-mobil.zip herunterladen

Der Ordner starter ist der Ausgangsstand, fertig der Stand nach dem Live-Coding.

Enthält: index.html, stil.css

Der Viewport

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

Ohne diese Zeile tut ein Handy so, als wäre es rund 980 Pixel breit, und verkleinert die Seite. Dann greifen keine Media Queries, und alles ist winzig. Die Zeile steht seit Tag 1 in jeder unserer Dateien. Erlaube außerdem immer das Zoomen, also kein user-scalable=no.

Media Queries

Verändere die Fensterbreite

.kasten { padding: 1rem; background: #fde68a; }
.kasten::after { content: "Schmal: unter 30rem"; }
@media (min-width: 30rem) {
  .kasten { background: #bbf7d0; }
  .kasten::after { content: "Breit: ab 30rem"; }
}

<div class="kasten"></div>

@media (min-width: 48rem) { … }          /* ab dieser Breite */
@media (max-width: 30rem) { … }          /* bis zu dieser Breite */
@media (hover: hover) { … }              /* Gerät kann schweben, also Maus */
@media print { … }                       /* beim Drucken */

Setze Umbruchpunkte dort, wo dein Layout es braucht, nicht bei bestimmten Geräten. Ziehe das Fenster auf, und wo es unschön wird, kommt ein Umbruchpunkt hin. Angaben in rem respektieren zudem die eingestellte Schriftgröße.

Mobile First

Schreibe zuerst die Regeln für den kleinen Bildschirm und erweitere dann mit min-width.

/* Für alle: eine Spalte */
.seite { display: grid; }

/* Mehr Platz: mehr Layout */
@media (min-width: 48rem) {
  .seite { grid-template-columns: 14rem 1fr; }
}

Warum? Die schmale Fassung ist die einfachere, denn sie ist nah am normalen Fluss. Vom Einfachen zum Komplexen braucht weniger Regeln, als alles Breite am Ende wieder zurückzunehmen. Und du denkst zuerst darüber nach, was wirklich wichtig ist.

Einige Fallen auf dem Handy:

Problem	Lösung
Die Seite scrollt seitlich	Das zu breite Element finden; bei breitem Inhalt nur dieses scrollen: `overflow-x: auto`
Grid-Spalte sprengt die Breite	`minmax(0, 1fr)` statt `1fr`, denn `1fr` wird nie kleiner als der Inhalt
`100vh` ist zu hoch	`100dvh` beachtet die Leiste des Browsers
Text wird zu klein	Größen in `rem`, mindestens etwa 16 Pixel für Fließtext

Responsive Bilder

Ein Foto in voller Größe auf einem Handy kostet Zeit und Datenvolumen. Mit srcset nennst du dem Browser mehrere Fassungen, und er wählt selbst.

Der Browser wählt die passende Datei

img { display: block; max-width: 100%; height: auto; }

<img
  src="/bilder/park-800.jpg"
  srcset="/bilder/park-400.jpg 400w, /bilder/park-800.jpg 800w, /bilder/park-1200.jpg 1200w"
  sizes="(min-width: 48rem) 40rem, 100vw"
  width="800" height="400"
  alt="Eine Läuferin auf einem Weg durch den Park."
  loading="lazy">

Attribut	Bedeutung
`srcset`	die verfügbaren Dateien mit ihrer Breite
`sizes`	wie breit das Bild auf der Seite sein wird
`loading="lazy"`	erst laden, wenn es in die Nähe des sichtbaren Bereichs kommt
`width`, `height`	vermeiden Springen beim Laden; zusammen mit `height: auto` im CSS

Für einen anderen Bildausschnitt oder ein neueres Format gibt es picture:

<picture>
  <source media="(min-width: 48rem)" srcset="breit.webp">
  <img src="schmal.jpg" alt="…">
</picture>

Touch

Zielgröße: mindestens etwa 44 × 44 Pixel. Auf dem Handy ist der Finger die Maus.
Kein Hover als einzige Funktion: Auf Touch-Geräten gibt es keinen Hover.
Abstände zwischen Links, damit man nicht daneben tippt.
Eingabefelder: type="email", type="tel" und inputmode="numeric" zeigen die passende Tastatur.
Schrift in Feldern ab 16 Pixel: Darunter zoomt iOS beim Antippen in das Feld.

Der Gerätemodus

F12, dann das Geräte-Symbol (Strg+Umschalt+M). Du kannst Geräte wählen, Breiten ziehen, Touch simulieren und das Netz verlangsamen. Das ersetzt nicht den Test auf einem echten Gerät, findet aber die meisten Probleme.

Live-Coding: Das Aufgabenbrett auf dem Handy

Im Starter klemmt die Seitenleiste auf dem Handy links und nimmt den halben Bildschirm ein. Wir stellen auf Mobile First um: Das Gerüst beginnt einspaltig, und die Seitenleiste wandert erst ab 48rem nach links.

/* Touch: Ziele mindestens 44 Pixel hoch */
.seitenleiste a,
.reiter a,
summary,
.knopf,
select {
  min-height: 2.75rem;
}

.seitenleiste a,
.reiter a {
  display: flex;
  align-items: center;
}

/* Reiter dürfen auf dem Handy seitlich scrollen, die Seite aber nicht */
.reiter {
  overflow-x: auto;
}

.reiter a {
  white-space: nowrap;
}

/* Ab Tablet-Breite: Seitenleiste neben dem Inhalt */
@media (min-width: 48rem) {
  body {
    grid-template-columns: 14rem minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "kopf         kopf"
      "seitenleiste inhalt";
  }

  .seitenleiste ul {
    flex-direction: column;
    flex-wrap: nowrap;
  }
}

/* Mit Maus darf es kleiner und enger sein: */
@media (hover: hover) and (pointer: fine) {
  .seitenleiste a,
  .reiter a,
  summary,
  .knopf,
  select {
    min-height: 2.25rem;
  }
}

Übung

Starter für die Übung

⤓ uebung-18-mobil.zip herunterladen

ZIP-Datei entpacken und den Ordner in VS Code öffnen (Datei → Ordner öffnen).

Enthält: index.html, stil.css, uebersicht.css, uebersicht.html

uebersicht.html ist mit uebersicht.css nur für den Desktop gebaut. Öffne den Gerätemodus und stelle etwa 390 Pixel ein.

Stufe 1: Eine Spalte

Schreibe die Regeln für .bereiche so um, dass zuerst eine einzige Spalte gilt. Das Wichtigste steht oben.

Stufe 2: Media Query

Erst ab 48rem gilt das zweispaltige Layout.

Stufe 3: Die breite Tabelle

Die Tabelle lässt die Seite seitlich scrollen. Sorge dafür, dass nur ihr Block scrollt, nicht die Seite.

Für Schnelle

Drei Kacheln passen nicht schön in 390 Pixel. Sorge für genau zwei Spalten auf kleinen Bildschirmen. Prüfe dann mit Netz „Slow 4G“ im Netzwerk-Tab, wie lange die Seite lädt.