Çalıştırılabilir HTML Dokümanları: Meta viewport

Q: Standart meta viewport etiketi nedir?

içine yazılan . Neredeyse her responsive sayfa için doğru seçimdir.

Q: Meta viewport etiketim neden çalışmıyor?

Etiketin içinde olduğunu, name değerinin viewport olduğunu ve değerlerin virgülle ayrıldığını kontrol et. Sayfa hâlâ yana kayıyorsa, sabit bir genişlik, büyük bir resim ya da uzun bir kelime gibi bir element ekrandan daha geniştir; etiket cihazdan daha geniş olan CSS'i düzeltemez.

Kullanılacak etiket

Bu satırı her sayfanın <head> kısmına koy:

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

width=device-width yerleşimi ekran kadar geniş yapar, initial-scale=1 de sayfayı %100 yakınlaştırmayla açar. Çoğu sitenin ihtiyacı bu kadar. Etiketin yerinde olduğu eksiksiz bir sayfa:

<!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 etiketi ve yerleşim genişliğini okur. Masaüstü tarayıcılar viewport etiketini yok sayar, bu yüzden bu önizlemede genişlik basitçe önizleme kutusunun genişliğidir. Bir telefonda aynı dosya, etiket sayesinde telefonun genişliğini (genellikle 360 ile 430 CSS pikseli arası) bildirir.

Telefonlar onsuz ne yapar

Viewport etiketi bulamayan bir mobil tarayıcı sayfanın masaüstü için yapıldığını varsayar. Sayfayı yaklaşık 980 piksel genişliğinde yerleştirir, sonra her şeyi ekrana sığacak şekilde küçültür. Aşağıdaki iki sahte telefon aynı sayfayı yükler; biri 980px'te, diğeri telefon genişliğinde yerleştirilmiş, ikisi de aynı boyuta ölçeklenmiş:

<!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>

İlk telefonda 16px metin minicik kalır ve okurun parmaklarıyla yakınlaştırması gerekir. İkincisinde okunabilir kalır ve @media (max-width: 600px) kuralı eşleştiği için sütunlar alt alta dizilir. Bu, etiketin ikinci görevidir: media query'ler yerleşim genişliğini görür, bu yüzden etiket olmadan bir telefon 980px bildirir ve mobil stillerin hiçbir zaman uygulanmaz. show('with', 375) içindeki 375 değerini 980 yap, iki telefon aynı görünür.

Etiket işin yarısıdır

Viewport etiketi sana dar bir yerleşim verir; CSS'inin ona sığması gerekir. Sabit genişliği ekrandan daha geniş olan tek bir element bütün sayfanın yana kaymasına yol açar:

<!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>

İlk kutu yana kayar; ikincisi sığacak şekilde küçülür. Resimlere ve diğer geniş elementlere max-width: 100% ver, sabit piksel genişlikleri yerine esnek genişlikleri (yüzdeler, fr, flexbox) tercih et.

Viewport değerleri

Değer	Örnek	Ne yapar
`width`	`width=device-width`	Yerleşim genişliği. `device-width` CSS pikseli cinsinden ekran genişliğidir; bir sayıya da izin verilir ama nadiren iyi bir fikirdir.
`initial-scale`	`initial-scale=1`	Sayfa açıldığındaki yakınlaştırma seviyesi.
`minimum-scale` / `maximum-scale`	`maximum-scale=5`	Yakınlaştırma sınırları. Düşük bir maksimum yakınlaştırmayı engeller, bu yüzden `maximum-scale` değerini hiç yazma.
`user-scalable`	`user-scalable=yes`	Parmakla yakınlaştırmaya izin verilip verilmediği. Hiç yazma.
`viewport-fit`	`viewport-fit=cover`	`env(safe-area-inset-*)` padding'iyle birlikte, sayfanın bir çentik ya da yuvarlak köşelerin altına uzanmasını sağlar.
`interactive-widget`	`interactive-widget=resizes-content`	Ekran klavyesinin yerleşimi nasıl etkilediği. Android'de Chrome destekler.

Değerler virgülle ayrılır. Çentikli telefonlarda bütün ekranı dolduran bir sayfa şöyle görünür:

<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>

Yakınlaştırmayı engelleme

Bu etiketi eski şablonlarda bulursun:

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

Az gören kişilerin bağlı olduğu parmakla yakınlaştırmayı engeller ve Lighthouse gibi erişilebilirlik denetleyicileri onu işaretler. iOS'taki Safari user-scalable=no değerini yok sayar, yani etiket tutarlı şekilde çalışmaz bile. iPhone'da bir form alanına dokununca yakınlaşıyorsa, nedeni input'taki 16px'ten küçük bir yazı boyutudur; yakınlaştırmayı kapatmak yerine input'un font-size değerini en az 16px yap.

Sık yapılan hatalar

Etiketi unutmak. Responsive bir stil dosyası onsuz telefonlarda hiçbir şey yapmaz, çünkü media query'ler 980px'lik bir yerleşim görür. Onu sayfa şablonunda title etiketinin yanına koy.
Değerler arasında noktalı virgül. Virgül kullan: width=device-width, initial-scale=1.
width=375 gibi sabit bir genişlik yazmak. Ekranlar farklıdır; device-width kullan.
user-scalable=no ya da maximum-scale=1 ile yakınlaştırmayı kapatmak.
Yana kaymadan etiketi sorumlu tutmak. Ekrandan daha geniş olan elementi bul ve ona esnek bir genişlik ver.

Sıkça Sorulan Sorular

Meta viewport etiketi ne işe yarar?

Mobil tarayıcılara yerleşimin ne kadar geniş olması gerektiğini söyler. O olmadan çoğu telefon sayfayı yaklaşık 980 CSS pikseli genişliğinde yerleştirir ve ekrana sığacak şekilde küçültür. width=device-width ile yerleşim ekran genişliğiyle eşleşir, böylece metin okunabilir olur ve media query'ler çalışır.

Standart meta viewport etiketi nedir?

<head> içine yazılan <meta name="viewport" content="width=device-width, initial-scale=1">. Neredeyse her responsive sayfa için doğru seçimdir.

Meta viewport etiketim neden çalışmıyor?

Etiketin <head> içinde olduğunu, name değerinin viewport olduğunu ve değerlerin virgülle ayrıldığını kontrol et. Sayfa hâlâ yana kayıyorsa, sabit bir genişlik, büyük bir resim ya da uzun bir kelime gibi bir element ekrandan daha geniştir; etiket cihazdan daha geniş olan CSS'i düzeltemez.

user-scalable=no ya da maximum-scale=1 kullanmalı mıyım?

Hayır. İkisi de insanların yakınlaştırma yapmasını engeller; az gören birçok kullanıcı buna güvenir ve bunlar erişilebilirlik denetimlerinden geçemez. iOS'taki Safari zaten user-scalable=no değerini yok sayar.

Meta viewport etiketi masaüstü tarayıcıları etkiler mi?

Hayır. Masaüstü tarayıcılar onu yok sayar; orada yerleşim genişliği basitçe pencere genişliğidir. Etiket telefonlarda ve tabletlerde önemlidir.

İlgili kavramlar