Articles
Pengenalan kepada CSS
Reka Bentuk Pandangan dan Responsif

Reka Bentuk Pandangan dan Responsif

Artikel ini menerangkan tentang pandangan (viewport) dan reka bentuk responsif.

Anda akan belajar cara menetapkan pandangan (viewport) menggunakan tag <meta> dan mengapa ia penting.

YouTube Video

HTML untuk Pratonton

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>

Mengenai Menetapkan viewport dalam HTML

Tetapan viewport digunakan untuk mengawal maklumat tentang kawasan paparan (viewport) peranti yang memaparkan laman web. Ia memainkan peranan penting terutamanya dalam menyesuaikan paparan laman web pada peranti mudah alih.

Apakah itu Viewport?

Viewport merujuk kepada kawasan paparan dalam tetingkap penyemak imbas atau peranti di mana pengguna melihat laman web. Pada desktop, saiz tetingkap penyemak imbas menjadi viewport, manakala pada peranti mudah alih seperti telefon pintar dan tablet, saiz skrin peranti menjadi viewport.

Menentukan Viewport

Untuk mengawal viewport, anda menetapkan tetapan viewport menggunakan tag <meta> dalam HTML. Tetapan ini membolehkan anda menentukan bagaimana halaman akan dipaparkan pada peranti yang berbeza.

Sintaks Asas 

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

Kod ini menetapkan lebar viewport untuk sepadan dengan lebar peranti dan skala paparan awal (tahap zum) halaman kepada 1.0 (paparan 100%).

Ciri-ciri Utama viewport

Ciri-ciri yang utama boleh dinyatakan dengan atribut content untuk viewport adalah seperti berikut:.

  1. width

    • Tentukan lebar viewport untuk width. Dengan menetapkannya kepada device-width, viewport disesuaikan dengan lebar fizikal peranti dalam piksel.
    • Contoh: width=device-width

  2. height

    • Tentukan ketinggian viewport untuk height, walaupun biasanya hanya lebar ditetapkan dan ketinggian jarang ditentukan. Dengan menetapkannya kepada device-height, viewport sepadan dengan ketinggian fizikal peranti dalam piksel.
    • Contoh: height=device-height

  3. initial-scale

    • Tentukan tahap zum awal halaman untuk initial-scale. 1.0 bermaksud tahap zum 100% peranti.
    • Contoh: initial-scale=1.0

  4. minimum-scale

    • Tetapkan skala minimum untuk mengecilkan skala bagi minimum-scale. Dengan menetapkannya kepada 0.5, anda boleh mengecilkan skala sehingga 50%.
    • Contoh: minimum-scale=0.5

  5. maximum-scale

    • Tetapkan skala maksimum untuk memperbesar skala bagi maximum-scale. Dengan menetapkannya kepada 2.0, anda boleh memperbesar skala sehingga 200%.
    • Contoh: maximum-scale=2.0

  6. user-scalable

    • Tentukan sama ada pengguna boleh memperbesar halaman untuk user-scalable. Tentukan dengan yes atau no.
    • Contoh: Menetapkan user-scalable=no akan melumpuhkan pembesaran oleh pengguna.

Contoh yang Lazim Digunakan

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

Tetapan ini secara automatik melaraskan halaman agar sepadan dengan lebar skrin peranti mudah alih dan memastikan halaman dipaparkan pada tahap zum 100%. Ia adalah tetapan asas untuk reka bentuk responsif.

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

Tetapan ini melumpuhkan pembesaran oleh pengguna. Ia digunakan apabila pembesaran tidak diperlukan untuk reka bentuk tertentu atau apabila operasi pembesaran boleh menyebabkan kerosakan reka bentuk.

  1. Tahap Zum Tetap dan Lebar Viewport
1<meta name="viewport" content="width=1024, initial-scale=1.0">

Tetapan ini menetapkan lebar viewport pada 1024 piksel dan menetapkan tahap zum pada 100% semasa paparan awal. Ia digunakan apabila anda ingin mengekalkan lebar halaman tetap tanpa mengira lebar peranti.

Peranan viewport

Menetapkan viewport adalah penting untuk mengoptimumkan paparan, terutamanya pada peranti mudah alih. Dengan mengkonfigurasi viewport dengan betul, anda boleh mengelakkan isu seperti berikut:.

  • Mengelakkan halaman daripada melebihi lebar peranti, yang memerlukan tatalan.
  • Mengelakkan teks dan imej menjadi terlalu kecil sehingga sukar untuk dibaca.
  • Mengelakkan keseluruhan halaman daripada dikecilkan, menjadikannya sukar untuk berinteraksi.

Ringkasan

  • Viewport digunakan untuk mengawal kawasan paparan pada peranti yang memaparkan laman web.
  • Ia digunakan terutamanya untuk menyesuaikan paparan pada peranti mudah alih dan memainkan peranan penting dalam reka bentuk responsif.
  • Tetapan seperti width=device-width dan initial-scale=1.0 biasanya digunakan dalam reka bentuk web responsif standard.

Menetapkan viewport dengan betul boleh menyediakan pengalaman tontonan yang selesa kepada pengguna mudah alih.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Gambaran Keseluruhan Reka Bentuk Responsif dalam CSS