Articles
Introduktion til CSS
Visningsområde og responsivt design

Visningsområde og responsivt design

Denne artikel forklarer visningsområdet og responsivt design.

Du vil lære, hvordan du indstiller visningsområdet med <meta>-tagget, og hvorfor det er vigtigt.

YouTube Video

HTML til forhåndsvisning

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>

Om indstilling af viewport i HTML

Viewport-indstillingen bruges til at kontrollere information om visningsområdet (viewport) på den enhed, der viser websiden. Det spiller en vigtig rolle, især når det gælder tilpasning af visningen af websider på mobile enheder.

Hvad er en Viewport?

Viewport refererer til visningsområdet i et browser vindue eller en enhed, hvor brugeren ser en webside. På en desktop bliver størrelsen på browser vinduet viewporten, mens skærmstørrelsen på en mobil enhed såsom smartphones og tablets bliver viewporten.

Angivelse af Viewport

For at kontrollere viewporten konfigurerer du viewport-indstillingerne ved hjælp af <meta>-tagget i HTML. Denne indstilling giver dig mulighed for at specificere, hvordan siden vil blive vist på forskellige enheder.

Grundlæggende syntaks 

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

Denne kode indstiller viewport-bredden til at matche enhedens bredde og den indledende visningsskala (zoomniveau) på siden til 1,0 (100% visning).

Hovedegenskaber for viewport

De egenskaber, der primært kan specificeres med content-attributten for viewport, er som følger:.

  1. width

    • Angiv bredden af viewporten med width. Ved at sætte det til device-width justeres viewporten til enhedens fysiske bredde i pixels.
    • Eksempel: width=device-width

  2. height

    • Angiv højden af viewporten med height, selvom det generelt kun er bredden, der angives, og højden ikke ofte specificeres. Ved at sætte det til device-height matcher viewporten enhedens fysiske højde i pixels.
    • Eksempel: height=device-height

  3. initial-scale

    • Angiv den indledende zoomniveau for siden med initial-scale. 1.0 betyder enhedens 100% zoomniveau.
    • Eksempel: initial-scale=1.0

  4. minimum-scale

    • Specificer den minimale skala for at zoome ud med minimum-scale. Ved at sætte den til 0.5 kan du zoome ud op til 50%.
    • Eksempel: minimum-scale=0.5

  5. maximum-scale

    • Specificer den maksimale skala for at zoome ind med maximum-scale. Ved at sætte den til 2.0 kan du zoome ind op til 200%.
    • Eksempel: maximum-scale=2.0

  6. user-scalable

    • Specificer om brugeren kan zoome siden med user-scalable. Specificer med yes eller no.
    • Eksempel: Hvis user-scalable=no indstilles, deaktiveres brugerzoom.

Ofte anvendte eksempler

  1. Standardindstillinger for responsivt design
1<meta name="viewport" content="width=device-width, initial-scale=1.0">

Denne indstilling justerer automatisk siden til at matche skærmbredden på mobile enheder og sikrer, at siden vises med et zoomniveau på 100%. Det er en fundamental indstilling for responsivt design.

  1. Deaktivér zoom
1<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Denne indstilling deaktiverer zoomfunktionalitet for brugeren. Det bruges, når zoomning ikke er nødvendig for et specifikt design, eller når zoomfunktionalitet kan forårsage designproblemer.

  1. Faste zoomniveauer og viewport-bredde
1<meta name="viewport" content="width=1024, initial-scale=1.0">

Denne indstilling fastsætter viewport-bredden til 1024 pixels og sætter zoomniveauet til 100% ved den første visning. Det bruges, når du ønsker at holde sidebredden konstant uanset enhedens bredde.

Rollen af viewport

At konfigurere viewport er vigtigt for at optimere visningen, især på mobile enheder. Ved at konfigurere viewport korrekt kan du forhindre problemer som følgende:.

  • Forhindrer, at siden overgår enhedens bredde, hvilket ville kræve scrolling.
  • Forhindrer tekst og billeder i at blive for små til at læse nemt.
  • Forhindrer hele siden i at blive zoomet ud, hvilket gør det svært at interagere.

Sammendrag

  • Viewport bruges til at kontrollere visningsområdet på enheden, der viser websiden.
  • Det bruges hovedsageligt til at tilpasse visning på mobile enheder og spiller en vigtig rolle i responsivt design.
  • Indstillinger som width=device-width og initial-scale=1.0 bruges ofte i standard responsivt webdesign.

Korrekt opsætning af viewport kan give mobilbrugere en behagelig visningsoplevelse.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

Oversigt over responsivt design i CSS