Articles
Introduktion till CSS
Visningsport och Responsiv Design

Visningsport och Responsiv Design

Den här artikeln förklarar visningsporten och responsiv design.

Du kommer att lära dig hur du ställer in visningsporten med <meta>-taggen och varför det är viktigt.

YouTube Video

HTML för förhandsgranskning

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 att ställa in viewport i HTML

Inställningen för viewport används för att styra information om visningsområdet (viewport) för enheten som visar webbsidan. Det spelar en viktig roll, särskilt för att justera visningen av webbsidor på mobila enheter.

Vad är en Viewport?

Viewport avser visningsområdet för ett webbläsarfönster eller en enhet där användaren tittar på en webbsida. På en stationär dator blir webbläsarfönstrets storlek viewporten, medan skärmstorleken hos enheten blir viewporten på mobila enheter som smartphones och surfplattor.

Specificera Viewport

För att styra viewporten, konfigurerar du viewport-inställningarna med <meta>-taggen i HTML. Denna inställning låter dig specificera hur sidan kommer att visas på olika enheter.

Grundläggande syntax 

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

Den här koden ställer in viewportens bredd till att matcha enhetens bredd och den initiala visningsskalan (zoomnivån) för sidan till 1.0 (100 % visning).

Huvudegenskaper för viewport

De egenskaper som huvudsakligen kan specificeras med content-attributet i viewport är följande:.

  1. width

    • Specificera viewportens bredd med width. Genom att ställa in den på device-width justeras viewporten till enhetens fysiska bredd i pixlar.
    • Exempel: width=device-width

  2. height

    • Specificera viewportens höjd med height, även om det vanligtvis bara är bredden som anges och höjden sällan specificeras. Genom att ställa in den på device-height matchar viewporten enhetens fysiska höjd i pixlar.
    • Exempel: height=device-height

  3. initial-scale

    • Specificera sidans initiala zoomnivå med initial-scale. 1.0 innebär enheten 100 % zoomnivå.
    • Exempel: initial-scale=1.0

  4. minimum-scale

    • Ange den minsta skalan för att zooma ut för minimum-scale. Genom att ställa in den på 0.5 kan du zooma ut upp till 50 %.
    • Exempel: minimum-scale=0.5

  5. maximum-scale

    • Ange den högsta skalan för att zooma in för maximum-scale. Genom att ställa in den på 2.0 kan du zooma in upp till 200 %.
    • Exempel: maximum-scale=2.0

  6. user-scalable

    • Ange om användaren kan zooma sidan för user-scalable. Ange med yes eller no.
    • Exempel: Om user-scalable=no ställs in, inaktiveras användarzoomning.

Vanligt förekommande exempel

  1. Standardinställningar för responsiv design
1<meta name="viewport" content="width=device-width, initial-scale=1.0">

Denna inställning anpassar automatiskt sidan till att matcha mobilens skärmbredd och ser till att sidan visas med 100 % zoomnivå. Det är en grundläggande inställning för responsiv design.

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

Denna inställning avaktiverar användarens möjlighet att zooma. Det används när zoomning inte är nödvändigt för en specifik design eller när zoomning kan orsaka designfel.

  1. Fast zoomnivå och vyportsbredd
1<meta name="viewport" content="width=1024, initial-scale=1.0">

Denna inställning låser vyportsbredden till 1024 pixlar och sätter zoomnivån till 100 % vid den initiala visningen. Det används när du vill hålla sidbredden konstant oavsett enhetsbredd.

viewport-inställningens roll

Att ställa in viewport är viktigt för att optimera visningen, särskilt på mobila enheter. Genom att konfigurera viewport korrekt kan du förhindra problem som följande:.

  • Förhindrar att sidan överskrider enhetens bredd, vilket skulle kräva skrollning.
  • Förhindrar att text och bilder blir för små för att enkelt kunna läsas.
  • Förhindrar att hela sidan zoomas ut, vilket gör det svårt att interagera.

Sammanfattning

  • viewport används för att kontrollera visningsområdet för enheten som visar webbsidan.
  • Den används främst för att anpassa visning på mobila enheter och spelar en viktig roll i responsiv design.
  • Inställningar som width=device-width och initial-scale=1.0 används oftast i standardresponsiv webbdesign.

Att korrekt ställa in viewport kan ge mobilanvändare en bekväm visningsupplevelse.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

Översikt över responsiv design i CSS