Viewport Meta Etiketi

HTML'de viewport meta etiketi, bir web sayfasının farklı cihazlarda, özellikle de mobil cihazlarda, düzenini ve ölçeklendirmesini kontrol etmek için kullanılan özel bir etikettir. Bir HTML belgesinin <head> bölümü içinde yer alır ve tarayıcıya sayfanın nasıl işleneceğine ilişkin talimatlar sağlar. viewport meta etiketi, farklı ekran boyutlarına ve çözünürlüklerine uyum sağlayan duyarlı web tasarımları oluşturmak için gereklidir.

viewport meta etiketini kullanmanın temel söz dizimi şöyledir:

<meta name="viewport" content="name=value, name=value">

• <meta>: HTML belgesi hakkındaki meta verileri tanımlamak için kullanılan HTML etiketi.
• name="viewport": Bu meta etiketinin görünüm alanı ayarlarını denetlemek için kullanıldığını belirtir.
• content: Görünüm alanı ayarlarını virgülle ayrılmış name=value çiftlerinin listesi olarak sağlayan bir öznitelik.

content özniteliğinde kullanılan yaygın name=value çiftleri şunlardır:

• width=device-width: Görünüm alanının genişliğini cihazın ekran genişliğine ayarlar.

• initial-scale=1.0: Sayfa ilk yüklendiğinde başlangıç yakınlaştırma düzeyini ayarlar. 1.0 değeri, yakınlaştırma yok anlamına gelir.

• maximum-scale=1.0: İzin verilen maksimum yakınlaştırma düzeyini ayarlar.
• minimum-scale=1.0: İzin verilen minimum yakınlaştırma düzeyini ayarlar.

HTML belgesinde viewport meta etiketinin nasıl kullanılacağına dair bir örnek:

<!DOCTYPE html>
<html>
<head>
    <title>Viewport Meta Tag</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>Responsive Web Page</h1>
    <p>This page uses the viewport meta tag to adapt to different screen sizes.</p>
</body>
</html>

Bu örnekte, viewport meta etiketi width=device-width, initial-scale=1.0 olarak ayarlanmıştır. Bu, tarayıcıya viewport genişliğini cihaz genişliğine ayarlamasını ve 1.0 başlangıç yakınlaştırma düzeyini (yakınlaştırma yok) kullanmasını söyler.