Articles
Pengenalan ke CSS
Jendela Tampilan dan Desain Responsif

Jendela Tampilan dan Desain Responsif

Artikel ini menjelaskan tentang jendela tampilan dan desain responsif.

Anda akan belajar cara mengatur jendela tampilan menggunakan tag <meta> dan mengapa hal itu penting.

YouTube Video

HTML untuk Pratinjau

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>

Tentang Pengaturan viewport di HTML

Pengaturan viewport digunakan untuk mengontrol informasi tentang area tampilan (viewport) dari perangkat yang menampilkan halaman web. Ini memainkan peran penting terutama dalam menyesuaikan tampilan halaman web pada perangkat seluler.

Apa itu Viewport?

Viewport mengacu pada area tampilan dari jendela browser atau perangkat tempat pengguna melihat halaman web. Pada desktop, ukuran jendela browser menjadi viewport, sedangkan pada perangkat seluler seperti smartphone dan tablet, ukuran layar perangkat menjadi viewport.

Menentukan Viewport

Untuk mengontrol viewport, Anda mengonfigurasi pengaturan viewport menggunakan tag <meta> di HTML. Pengaturan ini memungkinkan Anda menentukan bagaimana halaman akan tampil di berbagai perangkat.

Sintaks Dasar 

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

Kode ini mengatur lebar viewport agar sesuai dengan lebar perangkat dan skala tampilan awal (tingkat zoom) halaman ke 1.0 (tampilan 100%).

Properti Utama dari viewport

Properti yang terutama dapat ditentukan dengan atribut content dari viewport adalah sebagai berikut:.

  1. width

    • Tentukan lebar viewport untuk width. Dengan menyetel ke device-width, viewport disesuaikan dengan lebar fisik perangkat dalam piksel.
    • Contoh: width=device-width

  2. height

    • Tentukan tinggi viewport untuk height, meskipun umumnya hanya lebar yang diatur dan tinggi jarang ditentukan. Dengan menyetel ke device-height, viewport sesuai dengan tinggi fisik perangkat dalam piksel.
    • Contoh: height=device-height

  3. initial-scale

    • Tentukan tingkat zoom awal halaman untuk initial-scale. 1.0 berarti tingkat zoom 100% dari perangkat.
    • Contoh: initial-scale=1.0

  4. minimum-scale

    • Tentukan skala minimum untuk memperkecil halaman dengan minimum-scale. Dengan mengaturnya ke 0.5, Anda dapat memperkecil hingga 50%.
    • Contoh: minimum-scale=0.5

  5. maximum-scale

    • Tentukan skala maksimum untuk memperbesar halaman dengan maximum-scale. Dengan mengaturnya ke 2.0, Anda dapat memperbesar hingga 200%.
    • Contoh: maximum-scale=2.0

  6. user-scalable

    • Tentukan apakah pengguna dapat memperbesar halaman dengan user-scalable. Tentukan dengan yes atau no.
    • Contoh: Mengatur user-scalable=no akan menonaktifkan fitur zoom oleh pengguna.

Contoh-Contoh yang Sering Digunakan

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

Pengaturan ini secara otomatis menyesuaikan halaman agar sesuai dengan lebar layar perangkat seluler dan memastikan halaman ditampilkan dengan tingkat zoom 100%. Ini adalah pengaturan penting untuk desain responsif.

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

Pengaturan ini menonaktifkan fitur zoom oleh pengguna. Ini digunakan ketika zoom tidak diperlukan untuk desain tertentu atau ketika operasi zoom dapat merusak desain.

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

Pengaturan ini menetapkan lebar viewport menjadi 1024 piksel dan mengatur tingkat zoom menjadi 100% pada tampilan awal. Ini digunakan ketika Anda ingin menjaga lebar halaman tetap konstan terlepas dari lebar perangkat.

Peran viewport

Mengatur viewport sangat penting untuk mengoptimalkan tampilan, terutama pada perangkat seluler. Dengan mengonfigurasi viewport dengan benar, Anda dapat mencegah masalah seperti berikut:.

  • Mencegah halaman melampaui lebar perangkat, yang dapat membutuhkan pengguliran.
  • Mencegah teks dan gambar menjadi terlalu kecil sehingga sulit untuk dibaca dengan mudah.
  • Mencegah seluruh halaman diperbesar keluar, sehingga sulit untuk berinteraksi.

Ringkasan

  • viewport digunakan untuk mengontrol area tampilan perangkat yang menampilkan halaman web.
  • Ini terutama digunakan untuk menyesuaikan tampilan pada perangkat seluler dan memainkan peran penting dalam desain responsif.
  • Pengaturan seperti width=device-width dan initial-scale=1.0 biasanya digunakan dalam desain web responsif standar.

Mengatur viewport dengan benar dapat memberikan pengalaman menonton yang nyaman bagi pengguna seluler.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Ikhtisar Desain Responsif dalam CSS