<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> satırı, mobil cihazlarda web sayfanızın düzgün ve uyumlu görünmesini sağlayan HTML başlık (head) meta etiketidir. Responsive (duyarlı) tasarımın temel taşıdır.

Açıklama:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Parametreler:

width=device-width: Ekran genişliğini, cihazın gerçek piksel genişliğine eşitler.
initial-scale=1: Sayfa ilk yüklendiğinde %100 yakınlaştırma seviyesinde (zoom 1) gösterilir.
shrink-to-fit=no: İçeriğin, ekran boyutuna sığması için küçültülmesini engeller. Genelde Safari’de kullanılır.

Neden Gereklidir?

Mobil cihazlarda görünüm bozulmalarını önler.
Responsive CSS framework'leri (örneğin Bootstrap) bu etiketi zorunlu kılar.
Tarayıcıların varsayılan genişliği genellikle 980px olduğundan, bu etiket olmazsa mobil uyumlu CSS çalışmaz.

Mobil Uyumlu CSS ile Birlikte Kullanım Örneği:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="style.css">
</head>

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px;
}

@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
  .menu {
    flex-direction: column;
  }
}

Özet:

Bu meta etiket olmadan responsive CSS kodları etkili çalışmaz. Sayfanızın mobil cihazlarda doğru şekilde render edilmesini sağlamak için mutlaka <head> etiketleri arasında kullanılmalıdır. Özellikle modern frontend geliştirme süreçlerinde varsayılan olarak yer almalıdır.