Tag Meta Viewport: Penjelasan width=device-width

Tag yang perlu dipakai

Letakkan baris ini di <head> setiap halaman:

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

width=device-width membuat layout selebar layar, dan initial-scale=1 membuka halaman dengan zoom 100%. Hanya itu yang dibutuhkan kebanyakan situs. Halaman lengkap dengan tag ini terpasang:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Viewport</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Hello, phone</h1>
  <p id="out"></p>
  <script>
    const meta = document.querySelector('meta[name="viewport"]');
    document.getElementById('out').textContent =
      'Viewport tag: "' + meta.content + '". Layout width here: ' + innerWidth + 'px.';
  </script>
</body>
</html>

Script ini membaca tag dan lebar layout. Browser desktop mengabaikan tag viewport, jadi di preview ini lebarnya sama dengan lebar kotak preview. Di ponsel, file yang sama melaporkan lebar ponsel (biasanya 360 sampai 430 piksel CSS) karena tag ini.

Apa yang terjadi di ponsel tanpa tag ini

Browser mobile yang tidak menemukan tag viewport menganggap halaman itu dibuat untuk desktop. Browser menyusun halaman dengan lebar sekitar 980 piksel, lalu mengecilkan semuanya agar muat di layar. Dua ponsel tiruan di bawah ini memuat halaman yang sama, satu disusun dengan lebar 980px dan satu dengan lebar ponsel, keduanya diskalakan ke ukuran yang sama:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>With and without</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .phones { display: flex; gap: 24px; flex-wrap: wrap; }
    figure { margin: 0; width: 180px; }
    .phone { width: 180px; height: 320px; overflow: hidden; border: 6px solid #111827; border-radius: 16px; }
    iframe { border: 0; transform-origin: 0 0; background: #fff; }
    figcaption { font-size: 13px; margin-top: 6px; }
  </style>
</head>
<body>
  <div class="phones">
    <figure>
      <div class="phone"><iframe id="without" title="Page at 980px"></iframe></div>
      <figcaption>No viewport tag: laid out at 980px, shrunk</figcaption>
    </figure>
    <figure>
      <div class="phone"><iframe id="with" title="Page at 375px"></iframe></div>
      <figcaption>With the tag: laid out at 375px</figcaption>
    </figure>
  </div>
  <script>
    const page = `<style>
      body { font: 16px system-ui, sans-serif; margin: 12px; }
      .cols { display: flex; gap: 12px; }
      .cols div { flex: 1; background: #dbeafe; padding: 12px; }
      @media (max-width: 600px) { .cols { flex-direction: column; } }
    </style>
    <h1>My site</h1>
    <p>This paragraph is set at 16px, a comfortable size to read.</p>
    <div class="cols"><div>Column one</div><div>Column two</div></div>`;
    function show(id, layoutWidth) {
      const frame = document.getElementById(id);
      const scale = 180 / layoutWidth;
      frame.width = layoutWidth;
      frame.height = Math.round(320 / scale);
      frame.style.transform = 'scale(' + scale + ')';
      frame.srcdoc = page;
    }
    show('without', 980);
    show('with', 375);
  </script>
</body>
</html>

Di ponsel pertama, teks 16px jadi sangat kecil dan pembaca harus mencubit layar untuk zoom. Di ponsel kedua teksnya tetap terbaca, dan kolom-kolomnya bertumpuk karena aturan @media (max-width: 600px) cocok. Itulah tugas kedua tag ini: media query melihat lebar layout, jadi tanpa tag ini ponsel melaporkan 980px dan gaya mobile-mu tidak pernah berlaku. Ganti 375 menjadi 980 di show('with', 375) dan kedua ponsel akan terlihat sama.

Tag ini baru setengah pekerjaan

Tag viewport memberimu layout yang sempit; CSS-mu harus muat di dalamnya. Satu elemen dengan lebar tetap yang lebih lebar dari layar membuat seluruh halaman bisa digeser ke samping:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fitting the width</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .screen { width: 300px; border: 2px solid #111827; padding: 8px; margin-bottom: 12px; overflow-x: auto; }
    .banner { background: #f59e0b; height: 60px; }
    .fixed { width: 480px; }
    .fluid { max-width: 100%; width: 480px; }
  </style>
</head>
<body>
  <p>A 300px wide screen:</p>
  <div class="screen"><div class="banner fixed">width: 480px</div></div>
  <div class="screen"><div class="banner fluid">max-width: 100%</div></div>
</body>
</html>

Kotak pertama bisa digeser ke samping; kotak kedua mengecil agar muat. Beri gambar dan elemen lebar lainnya max-width: 100%, dan utamakan lebar yang fleksibel (persentase, fr, flexbox) daripada lebar piksel yang tetap.

Nilai viewport

Nilai-nilainya dipisahkan koma. Halaman yang memenuhi seluruh layar di ponsel dengan notch terlihat seperti ini:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<style>
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
</style>

Jangan blokir zoom

Kamu akan menemukan tag ini di template lama:

<!-- Avoid: stops people from zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Tag ini mencegah zoom dengan mencubit, yang diandalkan oleh orang dengan penglihatan rendah, dan pemeriksa aksesibilitas seperti Lighthouse menandainya. Safari di iOS mengabaikan user-scalable=no, jadi tag ini bahkan tidak berfungsi secara konsisten. Kalau sebuah kolom form melakukan zoom saat diketuk di iPhone, penyebabnya adalah ukuran font di bawah 16px pada input; atur font-size input itu minimal 16px, jangan menonaktifkan zoom.

Kesalahan umum

• Lupa menulis tag ini. Stylesheet responsif tidak berbuat apa-apa di ponsel tanpa tag ini, karena media query melihat layout 980px. Letakkan di samping tag title di template halamanmu.
• Titik koma di antara nilai. Pakai koma: width=device-width, initial-scale=1.
• Menulis lebar secara tetap seperti width=375. Ukuran layar berbeda-beda; pakai device-width.
• Menonaktifkan zoom dengan user-scalable=no atau maximum-scale=1.
• Menyalahkan tag ini saat halaman bisa digeser ke samping. Cari elemen yang lebih lebar dari layar dan beri lebar yang fleksibel.