Articles
Introduksjon til CSS
Visningsområde og responsiv design

Visningsområde og responsiv design

Denne artikkelen forklarer visningsområde og responsiv design.

Du vil lære hvordan du setter visningsområdet med <meta>-taggen og hvorfor det er viktig.

YouTube Video

HTML for 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 å sette viewport i HTML

Innstillingen for viewport brukes til å kontrollere informasjon om visningsområdet (viewport) til enheten som viser nettsiden. Det spiller en viktig rolle, spesielt for justering av visning av nettsider på mobile enheter.

Hva er en Viewport?

Viewport refererer til visningsområdet for et nettleservindu eller en enhet der brukeren ser en nettside. På en stasjonær datamaskin blir størrelsen på nettleservinduet viewporten, mens på mobile enheter som smarttelefoner og nettbrett blir skjermstørrelsen på enheten viewporten.

Spesifisere Viewporten

For å kontrollere viewporten, konfigurerer du viewport-innstillingene ved å bruke <meta>-taggen i HTML. Denne innstillingen lar deg spesifisere hvordan siden skal vises på forskjellige enheter.

Grunnleggende Syntax 

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

Denne koden setter viewportens bredde til å samsvare med enhetens bredde og den første visningsskalaen (zoomnivået) for siden til 1.0 (100 % visning).

Hovedegenskaper for viewport

Egenskapene som hovedsakelig kan spesifiseres med content-attributtet i viewport er som følger:.

  1. width

    • Spesifiser bredden på viewporten med width. Ved å sette den til device-width, justeres viewporten til enhetens fysiske bredde i piksler.
    • Eksempel: width=device-width

  2. height

    • Spesifiser høyden på viewporten med height, selv om det vanligvis kun er bredden som settes og høyden sjelden angis. Ved å sette den til device-height, samsvarer viewporten med enhetens fysiske høyde i piksler.
    • Eksempel: height=device-height

  3. initial-scale

    • Spesifiser det første zoomnivået for siden med initial-scale. 1.0 betyr enhetens 100 % zoomnivå.
    • Eksempel: initial-scale=1.0

  4. minimum-scale

    • Angi minimumsskalaen for å zoome ut med minimum-scale. Ved å sette den til 0.5, kan du zoome ut opptil 50 %.
    • Eksempel: minimum-scale=0.5

  5. maximum-scale

    • Angi maksimumsskalaen for å zoome inn med maximum-scale. Ved å sette den til 2.0, kan du zoome inn opptil 200 %.
    • Eksempel: maximum-scale=2.0

  6. user-scalable

    • Angi om brukeren kan zoome inn på siden med user-scalable. Spesifiser med yes eller no.
    • Eksempel: Å sette user-scalable=no deaktiverer brukers zooming.

Vanlig brukte eksempler

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

Denne innstillingen justerer siden automatisk for å matche skjermbredden til mobile enheter og sikrer at siden vises med et zoomnivå på 100 %. Det er en grunnleggende innstilling for responsivt design.

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

Denne innstillingen deaktiverer brukerens mulighet til å zoome. Den brukes når zooming ikke er nødvendig for et spesifikt design eller når zoomoperasjoner kan føre til at designet ødelegges.

  1. Faste zoomnivåer og visningsbredden
1<meta name="viewport" content="width=1024, initial-scale=1.0">

Denne innstillingen fikser visningsbredden til 1024 piksler og setter zoomnivået til 100 % ved første visning. Den brukes når du vil holde sidebredden konstant uavhengig av enhetens bredde.

Rollen til viewport

Å sette viewport er avgjørende for å optimalisere visningen, spesielt på mobile enheter. Ved å konfigurere viewport riktig, kan du forhindre problemer som følgende:.

  • Forhindrer at siden overskrider enhetens bredde, noe som ville kreve rulling.
  • Forhindrer at tekst og bilder blir for små til å lese enkelt.
  • Forhindrer at hele siden zoomenes ut, noe som gjør det vanskelig å samhandle.

Sammendrag

  • viewport brukes til å kontrollere visningsområdet for enheten som viser nettsiden.
  • Det brukes hovedsakelig for å tilpasse visning på mobile enheter og spiller en viktig rolle i responsiv design.
  • Innstillinger som width=device-width og initial-scale=1.0 brukes ofte i standard responsiv webdesign.

Korrekt innstilling av viewport kan gi mobilbrukere en behagelig visningsopplevelse.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

Oversikt over responsiv design i CSS