Articles
Introductie tot CSS
Viewport en Responsief Ontwerp

Viewport en Responsief Ontwerp

Dit artikel legt de viewport en responsief ontwerp uit.

Je leert hoe je de viewport instelt met de <meta>-tag en waarom dit belangrijk is.

YouTube Video

HTML voor Voorbeeldweergave

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>

Over het instellen van de viewport in HTML

De viewport-instelling wordt gebruikt om informatie te regelen over het weergegeven gebied (viewport) van het apparaat dat de webpagina toont. Het speelt een belangrijke rol, vooral bij het aanpassen van de weergave van webpagina's op mobiele apparaten.

Wat is een viewport?

De viewport verwijst naar het weergegeven gebied van een browservenster of apparaat waar de gebruiker een webpagina bekijkt. Op een desktop wordt de grootte van het browservenster de viewport, terwijl op mobiele apparaten zoals smartphones en tablets de schermgrootte van het apparaat de viewport wordt.

De viewport specificeren

Om de viewport te beheren, stel je de viewportinstellingen in met behulp van de <meta>-tag in HTML. Met deze instelling kun je specificeren hoe de pagina wordt weergegeven op verschillende apparaten.

Basis Syntax 

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

Deze code stelt de viewportbreedte in om overeen te komen met de breedte van het apparaat en de initiële weergaveschaal (zoomniveau) van de pagina op 1.0 (100% weergave) in te stellen.

Belangrijkste eigenschappen van viewport

De eigenschappen die voornamelijk kunnen worden gespecificeerd met het content-attribuut van viewport zijn als volgt:.

  1. width

    • Specificeer de breedte van de viewport met width. Door het in te stellen op device-width, wordt de viewport aangepast aan de fysieke breedte van het apparaat in pixels.
    • Voorbeeld: width=device-width

  2. height

    • Specificeer de hoogte van de viewport met height, hoewel meestal alleen de breedte wordt ingesteld en de hoogte niet vaak wordt gespecificeerd. Door het in te stellen op device-height, komt de viewport overeen met de fysieke hoogte van het apparaat in pixels.
    • Voorbeeld: height=device-height

  3. initial-scale

    • Specificeer het initiële zoomniveau van de pagina met initial-scale. 1.0 betekent het 100% zoomniveau van het apparaat.
    • Voorbeeld: initial-scale=1.0

  4. minimum-scale

    • Geef de minimale schaal op voor uitzoomen met minimum-scale. Door dit in te stellen op 0.5, kunt u tot 50% uitzoomen.
    • Voorbeeld: minimum-scale=0.5

  5. maximum-scale

    • Geef de maximale schaal op voor inzoomen met maximum-scale. Door dit in te stellen op 2.0, kunt u tot 200% inzoomen.
    • Voorbeeld: maximum-scale=2.0

  6. user-scalable

    • Geef aan of de gebruiker de pagina kan zoomen met user-scalable. Geef op met yes of no.
    • Voorbeeld: Door user-scalable=no in te stellen, wordt gebruikerszoomen uitgeschakeld.

Veelgebruikte voorbeelden

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

Deze instelling past de pagina automatisch aan de schermbreedte van mobiele apparaten aan en zorgt ervoor dat de pagina op 100% zoomniveau wordt weergegeven. Het is een essentiële instelling voor responsief ontwerp.

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

Deze instelling schakelt zoomen door de gebruiker uit. Het wordt gebruikt wanneer zoomen niet nodig is voor een specifiek ontwerp of wanneer zoomoperaties het ontwerp kunnen verstoren.

  1. Vaste zoomniveaus en viewportbreedte
1<meta name="viewport" content="width=1024, initial-scale=1.0">

Deze instelling fixeert de viewportbreedte op 1024 pixels en stelt het zoomniveau in op 100% bij de eerste weergave. Het wordt gebruikt wanneer u de pagina's breedte constant wilt houden, ongeacht de breedte van het apparaat.

Rol van viewport

Het instellen van de viewport is essentieel voor het optimaliseren van de weergave, vooral op mobiele apparaten. Door de viewport correct te configureren, kunt u problemen zoals de volgende voorkomen:.

  • Voorkomt dat de pagina breder wordt dan de breedte van het apparaat, wat scrollen zou vereisen.
  • Voorkomt dat tekst en afbeeldingen te klein worden om gemakkelijk te lezen.
  • Voorkomt dat de hele pagina wordt uitgezoomd, waardoor interactie moeilijk wordt.

Samenvatting

  • De viewport wordt gebruikt om het weergavegebied van het apparaat dat de webpagina weergeeft te beheren.
  • Het wordt voornamelijk gebruikt om de weergave op mobiele apparaten te ondersteunen en speelt een belangrijke rol in responsief ontwerp.
  • Instellingen zoals width=device-width en initial-scale=1.0 worden vaak gebruikt in standaard responsieve webontwerpen.

Het correct instellen van de viewport kan mobiele gebruikers een comfortabele kijkervaring bieden.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

Overzicht van responsief ontwerp in CSS