Articles
Einführung in CSS
Viewport und responsives Design

Viewport und responsives Design

Dieser Artikel erklärt den Viewport und das responsive Design.

Sie lernen, wie man den Viewport mit dem <meta>-Tag festlegt und warum das wichtig ist.

YouTube Video

HTML zur Vorschau

css-responsive-viewport.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-responsive-viewport.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Responsive Design</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Viewport Properties</h2>
20        </header>
21        <article>
22            <h3>Viewport Example</h3>
23            <section>
24                <header><h4>HTML</h4></header>
25                <pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
26            </section>
27        </article>
28        <article>
29            <h3>width</h3>
30            <section>
31                <header><h4>HTML</h4></header>
32                <pre>&lt;meta name="viewport" content="width=device-width"&gt;</pre>
33            </section>
34        </article>
35        <article>
36            <h3>height</h3>
37            <section>
38                <header><h4>HTML</h4></header>
39                <pre>&lt;meta name="viewport" content="height=device-height"&gt;</pre>
40            </section>
41        </article>
42        <article>
43            <h3>initial-scale</h3>
44            <section>
45                <header><h4>HTML</h4></header>
46                <pre>&lt;meta name="viewport" content="initial-scale=1.0"&gt;</pre>
47            </section>
48        </article>
49        <article>
50            <h3>minimum-scale</h3>
51            <section>
52                <header><h4>HTML</h4></header>
53                <pre>&lt;meta name="viewport" content="minimum-scale=0.5"&gt;</pre>
54            </section>
55        </article>
56        <article>
57            <h3>maximum-scale</h3>
58            <section>
59                <header><h4>HTML</h4></header>
60                <pre>&lt;meta name="viewport" content="maximum-scale=2.0"&gt;</pre>
61            </section>
62        </article>
63        <article>
64            <h3>user-scalable</h3>
65            <section>
66                <header><h4>HTML</h4></header>
67                <pre>&lt;meta name="viewport" content="user-scalable=no"&gt;</pre>
68            </section>
69        </article>
70        <article>
71            <h3>Viewport Common Examples 1</h3>
72            <section>
73                <header><h4>HTML</h4></header>
74                <pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
75            </section>
76        </article>
77        <article>
78            <h3>Viewport Common Examples 2</h3>
79            <section>
80                <header><h4>HTML</h4></header>
81<pre>
82&lt;meta name="viewport"
83      content="width=device-width, initial-scale=1.0, user-scalable=no"&gt;
84</pre>
85            </section>
86        </article>
87        <article>
88            <h3>Viewport Common Examples 3</h3>
89            <section>
90                <header><h4>HTML</h4></header>
91                <pre>&lt;meta name="viewport" content="width=1024, initial-scale=1.0"&gt;</pre>
92            </section>
93        </article>
94    </main>
95</body>
96</html>

Über die Einstellung des viewport in HTML

Die viewport-Einstellung wird genutzt, um Informationen über den Anzeigebereich (Viewport) des Geräts zu steuern, das die Webseite darstellt. Dies spielt insbesondere bei der Anpassung der Darstellung von Webseiten auf mobilen Geräten eine wichtige Rolle.

Was ist ein Viewport?

Der Viewport bezeichnet den Anzeigebereich eines Browserfensters oder Geräts, in dem der Benutzer eine Webseite betrachtet. Auf einem Desktop entspricht die Größe des Browserfensters dem Viewport, während auf mobilen Geräten wie Smartphones und Tablets die Bildschirmgröße des Geräts zum Viewport wird.

Den Viewport spezifizieren

Um den Viewport zu steuern, passen Sie die Viewport-Einstellungen mit dem <meta>-Tag in HTML an. Mit dieser Einstellung können Sie festlegen, wie die Seite auf verschiedenen Geräten dargestellt wird.

Grundlegende Syntax 

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

Dieser Code legt die Breite des Viewports so fest, dass sie der Breite des Geräts entspricht, und die anfängliche Skalierung (Zoomstufe) der Seite wird auf 1.0 (100 % Darstellung) gesetzt.

Haupteigenschaften des viewport

Die Eigenschaften, die hauptsächlich mit dem content-Attribut des viewport spezifiziert werden können, sind wie folgt:.

  1. width

    • Legen Sie die Breite des Viewports mit width fest. Indem Sie device-width festlegen, wird der Viewport an die physische Breite des Geräts in Pixeln angepasst.
    • Beispiel: width=device-width

  2. height

    • Legen Sie die Höhe des Viewports mit height fest, obwohl in der Regel nur die Breite angegeben wird und die Höhe selten spezifiziert wird. Indem Sie device-height festlegen, entspricht der Viewport der physischen Höhe des Geräts in Pixeln.
    • Beispiel: height=device-height

  3. initial-scale

    • Legen Sie die anfängliche Zoomstufe der Seite mit initial-scale fest. 1.0 bedeutet das 100%-Zoomlevel des Geräts.
    • Beispiel: initial-scale=1.0

  4. minimum-scale

    • Geben Sie den minimalen Zoommaßstab für minimum-scale an. Wenn Sie es auf 0.5 setzen, können Sie bis zu 50% herauszoomen.
    • Beispiel: minimum-scale=0.5

  5. maximum-scale

    • Geben Sie den maximalen Zoommaßstab für maximum-scale an. Wenn Sie es auf 2.0 setzen, können Sie bis zu 200% hineinzoomen.
    • Beispiel: maximum-scale=2.0

  6. user-scalable

    • Geben Sie an, ob der Benutzer die Seite mit user-scalable zoomen kann. Geben Sie yes oder no an.
    • Beispiel: Das Festlegen von user-scalable=no deaktiviert das User-Zooming.

Häufig verwendete Beispiele

  1. Standard-Einstellungen für Responsive Design
1<meta name="viewport" content="width=device-width, initial-scale=1.0">

Diese Einstellung passt die Seite automatisch an die Bildschirmbreite von Mobilgeräten an und stellt sicher, dass die Seite mit 100% Zoomstufe angezeigt wird. Es ist eine grundlegende Einstellung für Responsive Design.

  1. Zoom deaktivieren
1<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Diese Einstellung deaktiviert das Zoomen durch den Benutzer. Es wird verwendet, wenn Zoomen für ein bestimmtes Design nicht erforderlich ist oder Zoomen das Design zerstören könnte.

  1. Feste Zoomstufen und Ansichtsfensterbreite
1<meta name="viewport" content="width=1024, initial-scale=1.0">

Diese Einstellung legt die Ansichtsfensterbreite auf 1024 Pixel fest und setzt die Zoomstufe beim anfänglichen Anzeigen auf 100%. Es wird verwendet, wenn Sie die Seitenbreite unabhängig von der Gerätebreite konstant halten möchten.

Rolle des viewport

Das Festlegen des viewport ist wesentlich, um die Anzeige zu optimieren, insbesondere auf Mobilgeräten. Durch die korrekte Konfiguration des Viewports können Sie folgende Probleme vermeiden:.

  • Verhindert, dass die Seite die Breite des Geräts überschreitet, was Scrollen erforderlich machen würde.
  • Verhindert, dass Text und Bilder zu klein werden, um sie leicht lesen zu können.
  • Verhindert, dass die gesamte Seite herausgezoomt wird, was die Interaktion erschwert.

Zusammenfassung

  • Das viewport wird verwendet, um den Anzeigebereich des Geräts zu steuern, das die Webseite anzeigt.
  • Es wird hauptsächlich verwendet, um die Anzeige auf mobilen Geräten anzupassen, und spielt eine wichtige Rolle im responsiven Design.
  • Einstellungen wie width=device-width und initial-scale=1.0 werden häufig im standardmäßigen responsiven Webdesign verwendet.

Die richtige Einstellung des viewport kann mobilen Nutzern ein angenehmes Anzeigeerlebnis bieten.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

Überblick über Responsives Design in CSS