Articles
Wprowadzenie do CSS
Widok i projektowanie responsywne

Widok i projektowanie responsywne

Ten artykuł wyjaśnia pojęcie widoku oraz projektowania responsywnego.

Dowiesz się, jak ustawić widok za pomocą tagu <meta> i dlaczego jest to ważne.

YouTube Video

HTML do podglądu

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>

O ustawieniach viewport w HTML

Ustawienie viewport służy do kontrolowania informacji o obszarze wyświetlania (viewport) urządzenia wyświetlającego stronę internetową. Odgrywa ważną rolę, szczególnie przy dostosowywaniu wyświetlania stron internetowych na urządzeniach mobilnych.

Czym jest Viewport?

Viewport odnosi się do obszaru wyświetlania okna przeglądarki lub urządzenia, na którym użytkownik przegląda stronę internetową. Na komputerze rozmiar okna przeglądarki staje się viewportem, podczas gdy na urządzeniach mobilnych, takich jak smartfony i tablety, rozmiar ekranu urządzenia staje się viewportem.

Określanie Viewportu

Aby kontrolować viewport, należy skonfigurować jego ustawienia za pomocą tagu <meta> w HTML. To ustawienie pozwala określić, jak strona będzie się wyświetlać na różnych urządzeniach.

Podstawowa składnia 

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

Ten kod ustawia szerokość viewportu, aby dopasować ją do szerokości urządzenia, a początkową skalę wyświetlania strony (poziom powiększenia) na 1.0 (100% wyświetlania).

Główne właściwości viewport

Właściwości, które można głównie określić za pomocą atrybutu content w viewport, to:.

  1. width

    • Określ szerokość viewportu za pomocą width. Ustawiając wartość na device-width, viewport zostaje dopasowany do fizycznej szerokości urządzenia w pikselach.
    • Przykład: width=device-width

  2. height

    • Określ wysokość viewportu za pomocą height, chociaż zazwyczaj ustawiana jest tylko szerokość, a wysokość rzadko jest określana. Ustawiając wartość na device-height, viewport zostaje dopasowany do fizycznej wysokości urządzenia w pikselach.
    • Przykład: height=device-height

  3. initial-scale

    • Określ początkowy poziom powiększenia strony za pomocą initial-scale. 1.0 oznacza 100% poziom powiększenia urządzenia.
    • Przykład: initial-scale=1.0

  4. minimum-scale

    • Określ minimalną skalę dla pomniejszania za pomocą minimum-scale. Ustawiając 0.5, można pomniejszyć widok do 50%.
    • Przykład: minimum-scale=0.5

  5. maximum-scale

    • Określ maksymalną skalę dla powiększania za pomocą maximum-scale. Ustawiając 2.0, można powiększyć widok do 200%.
    • Przykład: maximum-scale=2.0

  6. user-scalable

    • Określ, czy użytkownik może powiększać stronę za pomocą user-scalable. Określ za pomocą yes lub no.
    • Przykład: Ustawienie user-scalable=no wyłącza możliwość powiększania przez użytkownika.

Powszechnie używane przykłady

  1. Standardowe ustawienia responsywności
1<meta name="viewport" content="width=device-width, initial-scale=1.0">

To ustawienie automatycznie dostosowuje stronę do szerokości ekranu urządzeń mobilnych i zapewnia wyświetlanie strony na poziomie 100% powiększenia. Jest to podstawowe ustawienie dla projektów responsywnych.

  1. Wyłącz powiększanie
1<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

To ustawienie wyłącza możliwość powiększania przez użytkownika. Jest używane, gdy powiększanie nie jest konieczne dla danego projektu lub gdy operacje powiększania mogą powodować problemy z układem.

  1. Stałe poziomy powiększenia i szerokość widoku
1<meta name="viewport" content="width=1024, initial-scale=1.0">

To ustawienie ustawia szerokość widoku na 1024 pikseli i ustawia poziom powiększenia na 100% przy początkowym wyświetlaniu. Jest używane, gdy chcesz zachować stałą szerokość strony niezależnie od szerokości urządzenia.

Rola viewport

Ustawienie viewport jest niezbędne do optymalizacji wyświetlania, szczególnie na urządzeniach mobilnych. Poprzez poprawną konfigurację viewportu można zapobiec takim problemom, jak następujące:.

  • Zapobiega przekroczeniu szerokości strony poza szerokość urządzenia, co wymagałoby przewijania.
  • Zapobiega zbyt małemu rozmiarowi tekstu i obrazów, co utrudnia ich czytanie.
  • Zapobiega zbytniej redukcji rozmiaru całej strony, co utrudnia interakcję.

Podsumowanie

  • Viewport służy do kontrolowania obszaru wyświetlania urządzenia, na którym otwierana jest strona internetowa.
  • Głównie używany do dostosowania wyświetlania na urządzeniach mobilnych i odgrywa kluczową rolę w responsywnym projektowaniu.
  • Ustawienia, takie jak width=device-width i initial-scale=1.0, są powszechnie stosowane w standardowym responsywnym projektowaniu stron.

Prawidłowe ustawienie viewport może zapewnić użytkownikom urządzeń mobilnych wygodne korzystanie.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Przegląd projektowania responsywnego w CSS