Meta Viewport Etiketi Nedir, Nasıl Kullanılır?

Webmaster Konuları
Meta viewport etiketi

Meta Viewport etiketi, bir web sayfasının mobil cihazlardaki görünümünü ayarlamak için kullanılan bir HTML etiketidir. Bu etiket, tarayıcının sayfanın boyutunu ve ölçeklenmesini nasıl yöneteceğini belirler. Özellikle responsive (duyarlı, mobil uyumlu) tasarımda önemli bir rol oynar.

Meta Viewport Etiketinin Önemi:

  1. Duyarlılık: Mobil cihazlarda sayfanın düzgün bir şekilde görüntülenmesini sağlar. Eğer bu etiket yoksa, sayfa masaüstü versiyonuna göre görüntülenebilir ve kullanıcı deneyimi olumsuz etkilenebilir.
  2. Kullanılabilirlik: Kullanıcıların sayfada gezinmesini kolaylaştırır; içerik daha okunaklı hale gelir.
  3. SEO İçin Önemi: Mobil uyumlu siteler, arama motorları tarafından daha iyi değerlendirilir ve bu da sıralamaları etkileyebilir.

Meta Viewport Etiketi Nasıl Kullanılır?:

Meta viewport etiketi, HTML belgesinin <head> bölümünde yer alır. Aşağıdaki gibi eklenir:

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

Açıklamalar:

  • width=device-width: Cihazın ekran genişliğini kullanarak sayfanın genişliğini ayarlar.
  • initial-scale=1.0: Sayfanın başlangıçta %100 ölçekle görüntülenmesini sağlar.