Kapitel 13: Anpassung und Kompatibilität

📱 Lernziel: Webseiten für mehrere Geräte anpassen und Browser-Kompatibilität sicherstellen!

13.1 Grundlagen der Web-Anpassung: viewport meta-Tag

Das viewport meta-Tag ist unverzichtbar für mobile Geräte.

Syntax:

html

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

Warum wird es benötigt?

Ohne dieses Tag zeigen Mobilgeräte die Seite wie auf Desktop an (heranzoomt)
Mit diesem Tag passt sich die Seite der Gerätebreite an

Attribute:

Attribut	Bedeutung
`width=device-width`	Breite = Gerätebreite
`initial-scale=1.0`	Zoomstufe beim Laden
`maximum-scale=1.0`	Maximaler Zoom
`user-scalable=no`	Zoom deaktivieren (nicht empfohlen)

✅ Muss in jedem HTML-Dokument enthalten sein!

html

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meine Webseite</title>
</head>

13.2 Browser-Kompatibilität

Verschiedene Browser unterstützen HTML-Tags unterschiedlich.

Browser-Marktanteile (2026):

Browser	Unterstützung
Chrome	⭐⭐⭐⭐⭐
Firefox	⭐⭐⭐⭐⭐
Safari	⭐⭐⭐⭐
Edge	⭐⭐⭐⭐⭐
IE (veraltet)	⭐ (nicht empfohlen)

Kompatibilitäts-Checkliste:

Teste in Chrome (Entwickler-Standard)
Teste in Firefox (gute Standards)
Teste in Safari (für iOS-Nutzer)
Prüfe Can I Use (https://caniuse.com/)

Beispiel - Fallback für alte Browser:

html

<!-- Video mit Fallback -->
<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <!-- Fallback für alte Browser -->
  <p>Ihr Browser unterstützt keine Videos. 
     <a href="video.mp4">Video herunterladen</a>
  </p>
</video>

13.3 Graceful Degradation (Rückgriff auf einfache Version)

Was ist Graceful Degradation?

Moderne Features für neue Browser
Einfache Fallbacks für alte Browser

Beispiel - Flexbox mit Fallback:

html

<style>
  .container {
    display: block; /* Fallback für alte Browser */
    display: flex;   /* Moderne Browser */
  }
</style>

Beispiel - HTML5 Shiv (für IE 8-9):

html

<!--[if lt IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

Tipp: Heute ist HTML5 Shiv nicht mehr nötig (IE wird nicht mehr unterstützt).

13.4 Responsive HTML-Grundlagen

Responsive Design = Anpassung an Handy, Tablet, Desktop.

HTML-Vorbereitung für responsives Design:

1. viewport meta-Tag (bereits besprochen)

html

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

2. Relative Einheiten verwenden

html

<!-- ❌ Falsch (feste Breite) -->
<img src="bild.jpg" width="800">

<!-- ✅ Richtig (relative Breite) -->
<img src="bild.jpg" style="max-width: 100%; height: auto;">

3. Semantische Struktur für responsive Layouts

html

<header>...</header>
<main>
  <article>...</article>
  <aside>...</aside>
</main>
<footer>...</footer>

CSS (für späteres Lernen) wird dann Media Queries verwenden:

css

/* Desktop: 2 Spalten */
main { display: flex; }

/* Handy: 1 Spalte */
@media (max-width: 768px) {
  main { flex-direction: column; }
}

13.5 Praxis: Mobile Webseite erstellen

Aufgabe: Erstelle eine mobile Webseite mit viewport-Tag.

Lösung:

html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meine mobile Webseite</title>
  <style>
    /* Einfaches responsives CSS */
    body { margin: 0; font-family: Arial, sans-serif; }
    img { max-width: 100%; height: auto; }
    
    /* Mobile-First: Standard = mobile */
    .container { padding: 10px; }
    
    /* Desktop: mehr Padding */
    @media (min-width: 768px) {
      .container { padding: 20px; max-width: 1200px; margin: 0 auto; }
    }
  </style>
</head>
<body>
  <header>
    <h1>Meine mobile Webseite</h1>
    <nav>
      <a href="index.html">Start</a> | 
      <a href="über-uns.html">Über uns</a> | 
      <a href="kontakt.html">Kontakt</a>
    </nav>
  </header>
  
  <main class="container">
    <article>
      <h2>Willkommen auf meiner mobilen Webseite</h2>
      <img src="bild.jpg" alt="Beispielbild">
      <p>Diese Webseite passt sich automatisch an die Gerätebreite an.</p>
    </article>
  </main>
  
  <footer>
    <p>&copy; 2026 Meine Webseite</p>
  </footer>
</body>
</html>

✅ Zusammenfassung

In diesem Kapitel hast du gelernt:

✅ viewport meta-Tag (SEO-wichtig für Mobile!)
✅ Browser-Kompatibilität prüfen
✅ Graceful Degradation für alte Browser
✅ Responsive HTML-Grundlagen
✅ Eine mobile Webseite zu erstellen

🎯 Nächster Schritt: In Kapitel 14 lernst du die Verbindung zwischen HTML, CSS und JavaScript!

← Zurück zu Kapitel 12: Semantische EntwicklungWeiter zu Kapitel 14: HTML mit CSS/JS Verbindung →

Kapitel 13: Anpassung und Kompatibilität ​

13.1 Grundlagen der Web-Anpassung: viewport meta-Tag ​

13.2 Browser-Kompatibilität ​

13.3 Graceful Degradation (Rückgriff auf einfache Version) ​

13.4 Responsive HTML-Grundlagen ​

1. viewport meta-Tag (bereits besprochen) ​

2. Relative Einheiten verwenden ​

3. Semantische Struktur für responsive Layouts ​

13.5 Praxis: Mobile Webseite erstellen ​

✅ Zusammenfassung ​

Kapitel 13: Anpassung und Kompatibilität

13.1 Grundlagen der Web-Anpassung: viewport meta-Tag

13.2 Browser-Kompatibilität

13.3 Graceful Degradation (Rückgriff auf einfache Version)

13.4 Responsive HTML-Grundlagen

1. viewport meta-Tag (bereits besprochen)

2. Relative Einheiten verwenden

3. Semantische Struktur für responsive Layouts

13.5 Praxis: Mobile Webseite erstellen

✅ Zusammenfassung