Meta Viewport Etiketi Nedir? Meta Viewport Etiketi Nasıl Kullanılır? Meta viewport etiketi, web sayfalarının mobil cihazlarda nasıl görüntüleneceğini kontrol eden bir HTML etiketidir. Bu etiket, kullanıcıların cihazlarının ekran boyutlarına göre sayfanın genişliğini ve ölçeklendirmesini ayarlamak için kullanılır. Bu makalemizde Meta Viewport etiketi hakkında tüm bilinmesi gerekenleri paylaştık.
Meta Viewport Etiketi Nedir?

“Meta viewport etiketi“, web geliştiricilerinin bir web sayfasının nasıl görüntüleneceğini çeşitli cihazlarda (özellikle mobil cihazlarda) kontrol etmek için kullanabileceği bir HTML etiketidir. Bu etiket, sayfanın boyutlandırılmasını ve ölçeklendirilmesini yönetir, böylece içerik farklı ekran boyutlarına uyum sağlayabilir. Mobil cihazların yaygınlaşmasıyla birlikte, meta viewport etiketi, web sitelerinin responsive (duyarlı) tasarımını sağlamak için kritik bir öneme sahip olmuştur.
Meta viewport etiketi, <head> bölümünde yer alır ve aşağıdaki gibi görünür:
<meta name=“viewport“ content=“width=device-width, initial-scale=1“>
Bu etiketin temel parametreleri şunlardır:
- width: Sayfanın genişliğini belirtir. Genellikle device-width olarak ayarlanır, bu da sayfanın genişliğinin cihazın ekran genişliğine eşit olacağı anlamına gelir.
- initial-scale: Sayfanın başlangıç ölçeklendirme seviyesini belirtir. 1 değeri sayfanın başlangıçta %100 ölçeklendirme ile görüntüleneceği anlamına gelir.
- maximum-scale, minimum-scale, user-scalable: Bu parametreler, kullanıcıların sayfayı manuel olarak yakınlaştırıp uzaklaştırmasını kontrol eder. Örneğin, user-scalable=no ayarı, kullanıcıların sayfayı ölçeklendirmesini engeller.
Meta viewport etiketi, mobil cihazlarda iyi bir kullanıcı deneyimi sağlamak için önemlidir. Özellikle responsive tasarım uygulayan sitelerde, içeriğin ekran boyutuna göre doğru şekilde ölçeklenmesini ve düzenlenmesini sağlar. Bu, kullanıcıların ekranı yakınlaştırmak veya yana kaydırmak zorunda kalmadan içeriği rahatça okuyabilmesi için gereklidir.
Meta Viewport Nasıl Kullanılır?

Meta viewport etiketi, web sayfalarının farklı cihazlarda, özellikle mobil cihazlarda doğru bir şekilde görüntülenmesini sağlamak için kullanılır. Bu etiket, sayfanın nasıl ölçeklendirileceğini ve boyutlandırılacağını tarayıcıya söyler, böylece içerik çeşitli ekran boyutlarına uyum sağlar. İşte meta viewport etiketinin kullanım adımları;
1. Etiketi Ekleyin
Meta viewport etiketi, HTML belgesinin <head> bölümüne eklenir. Bu, sayfanın başında, diğer meta etiketleri ve başlık (title) etiketi ile birlikte yer almalıdır.
<meta name=“viewport“ content=“width=device-width, initial-scale=1“>
Bu etiket, sayfanın genişliğinin cihazın ekran genişliğine (width=device-width) eşit olacağını ve başlangıç ölçeklendirme seviyesinin %100 (initial-scale=1) olacağını belirtir. Bu, sayfanın farklı cihaz ekranlarında doğru şekilde görüntülenmesini sağlar.
Zoom Kontrolü
Kullanıcıların sayfayı yakınlaştırıp uzaklaştırmasını kontrol etmek için minimum-scale, maximum-scale ve user-scalable özellikleri kullanılabilir:
Bu örnekte, maximum-scale=1 ve user-scalable=no ayarları, kullanıcıların sayfayı ölçeklendirmesini engeller.
minimum-scale: Sayfanın minimum ölçeklendirme seviyesini belirtir.
maximum-scale: Sayfanın maksimum ölçeklendirme seviyesini belirtir.
user-scalable: Kullanıcıların sayfayı yakınlaştırıp uzaklaştırabilmesini (yes veya no) kontrol eder.
Responsive Tasarım: Meta viewport etiketi, responsive (duyarlı) tasarımın bir parçasıdır. CSS medya sorguları ile birlikte kullanıldığında, içeriğin farklı ekran boyutlarına uyum sağlamasını kolaylaştırır.
Test Etme: Farklı cihazlarda ve tarayıcılarda sayfanın nasıl görüntülendiğini test edin. Bu, etiketin doğru çalıştığından ve içeriğin beklenen şekilde görüntülendiğinden emin olmanızı sağlar.
Kullanıcı Deneyimi: Zoom engelleme gibi özellikleri dikkatli kullanın. Bazen kullanıcıların içeriği daha rahat okuyabilmek için yakınlaştırma yapması gerekebilir. Kullanıcı deneyimini iyileştirmek için bu özellikleri akılcı bir şekilde kullanın.
Meta viewport etiketi, modern web tasarımında kritik bir rol oynar ve mobil cihazlarda iyi bir kullanıcı deneyimi sağlamak için gereklidir.
Profesyonel Web Tasarım hizmeti almak için bizimle iletişime geçebilirsiniz.
Antalya Medya Ajans: Instagram
İlginizi Çekebilir 👇
👉 Dijital Pazarlama Ajansları için En İyi 6 SEO Aracı
👉 SEO İçin En İyi 5 Google Chrome Uzantısı
👉 Lokalhost Nedir, Ne İşe Yarar?





























