Tag Meta Area Tampilan
Tambahkan tag meta viewport dan pahami alasan tag ini diperlukan agar tata letak responsif berfungsi dengan benar di perangkat seluler.
Tag Meta Area Tampilan adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Mengapa Tag Meta Area Tampilan?
Tanpa tag meta area tampilan, peramban seluler merender halaman dengan lebar desktop (sering kali 980px) lalu memperkecil tampilan agar sesuai. Akibatnya, teks menjadi sangat kecil dan tata letak rusak. Tag meta memberi tahu peramban untuk menggunakan lebar perangkat yang sebenarnya.
Tag Ini
Tambahkan ini di dalam <head> pada setiap halaman. Ini diperlukan agar desain responsif apa pun berfungsi dengan benar.
<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width
width=device-width menetapkan lebar area tampilan sama dengan lebar layar perangkat dalam piksel CSS. Pada iPhone 14 (selebar 390px), area tampilan menjadi 390px, bukan 980px.
initial-scale=1.0
initial-scale=1.0 menetapkan tingkat perbesaran menjadi 1 saat halaman pertama kali dimuat. Tanpanya, beberapa peramban mungkin tetap menerapkan faktor perbesaran. Bersama device-width, pengaturan ini memberikan rasio piksel CSS terhadap piksel perangkat yang benar-benar 1:1.
Piksel CSS vs Piksel Fisik
Layar dengan DPI tinggi (Retina) memiliki rasio piksel perangkat (DPR) lebih besar dari 1. iPhone 14 selebar 390px memiliki 1170 piksel fisik (DPR = 3). Piksel CSS mengabstraksikan piksel fisik — CSS Anda tetap berfungsi dalam piksel CSS, terlepas dari DPR.
Jangan Gunakan user-scalable=no
Beberapa pengembang menambahkan user-scalable=no untuk menonaktifkan perbesaran dengan mencubit. Jangan lakukan ini. Hal tersebut mencegah pengguna dengan gangguan penglihatan memperbesar tampilan untuk membaca konten dan tidak memenuhi kriteria keberhasilan WCAG 1.4.4.
Unit Area Tampilan: vw dan vh
1vw = 1% dari lebar area tampilan. 1vh = 1% dari tinggi area tampilan. 100vw dan 100vh mengisi seluruh area tampilan. Gunakan unit ini untuk bagian hero dan tata letak layar penuh.
.hero {
width: 100vw;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}dvh — Tinggi Area Tampilan Dinamis
Pada perangkat seluler, 100vh mencakup antarmuka peramban (bilah alamat), yang dapat menyebabkan konten terpotong. 100dvh yang lebih baru (tinggi area tampilan dinamis) menyesuaikan diri dengan antarmuka yang terlihat. Gunakan with fallback.
.full-screen {
min-height: 100vh; /* fallback */
min-height: 100dvh; /* modern browsers */
}Area Tampilan di DevTools
Di Chrome DevTools, klik ikon perangkat untuk masuk ke Mode Perangkat dan melihat dengan tepat tampilan halaman Anda pada berbagai ukuran area tampilan. Penggaris menunjukkan piksel CSS.
Variasi Atribut Konten
Anda juga dapat menetapkan initial-scale, minimum-scale, dan maximum-scale. Pertahankan semuanya pada nilai yang wajar. Menetapkan minimum-scale=1 tanpa user-scalable=no tetap memungkinkan perbesaran, yang merupakan pendekatan aksesibel.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">Area Tampilan dan Kueri Media
Kueri media menggunakan lebar area tampilan (nilai piksel CSS, bukan piksel fisik). Jika area tampilan Anda 390px, @media (max-width: 768px) akan cocok. Tag meta area tampilan membuat titik henti ini berfungsi dengan benar pada perangkat seluler.
Pemeriksaan Singkat
Apa tujuan width=device-width dalam tag meta area tampilan?
Ringkasan: Tag Meta Area Tampilan
Selalu sertakan di dalam
. Jangan pernah menonaktifkan penskalaan pengguna. Gunakan vw/vh untuk ukuran yang relatif terhadap area tampilan. dvh memperbaiki masalah antarmuka peramban seluler. Satu tag ini memungkinkan semua CSS responsif berfungsi pada perangkat seluler.Pertanyaan yang Sering Diajukan
Apakah pelajaran “Tag Meta Area Tampilan” gratis?
Ya — teks lengkap “Tag Meta Area Tampilan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Tag Meta Area Tampilan”?
Tambahkan tag meta viewport dan pahami alasan tag ini diperlukan agar tata letak responsif berfungsi dengan benar di perangkat seluler. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Tag Meta Area Tampilan” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Tag Meta Area Tampilan
- Flexbox untuk Tata Letak
- CSS Grid untuk Tata Letak
- Kueri Media dan Pengembangan Mobile-First