Viewport Nedir

Viewport Nedir

Viewport, bir pencerenin veya ekrandaki görünür alanın boyutunu ifade etmektedir. Genel olarak viewpoer terimi akıllı telefonlar ve tabletler gibi mobil cihazlardaki ekranlar için kullanılır.

Viewport teriminin daha spesifik bir anlamı ise mobil optimizasyonda önemli bir rol oynayan HTML 5’teki bir meta öğesini ifade ediyor. Meta kod görüntülenen içeriği otomatik ölçeklendirir, böylece ekranın boyutu verimli bir şekilde kullanılmış olur. Bu durumda, meta öğesi viewport, tüm içeriğin eşit derecede ekrana yayılmasını ve farklı boyutlardaki ekranlarda doğru ve eksiksiz bir şekilde görüntülenmesini sağlar. Viewport kodu web sayfalarını ekranın uzunluğuna ve genişliğine göre uyarlar böylece mobil tarayıcılar tüm içeriği doğru bir şekilde görüntüleyebilir.

Görüntüleme alanınızın boyutu

Viewport Checker (Ekran Ölçü Bilgisi)

Yukarıdaki sayfa üzerinden kendi ekranınızın boyutu tam olarak kaça kaç olduğunu öğrenebilirsiniz.

HTML kodu

Viewport kodunu HTML dosyalarınıza iki farklı şekilde entegre edebilirsiniz: ya doğrudan belgeye ya da başvurulan bir CSS dosyasına ekleme yöntemidir. Bu iki alternatifin sözdizimi çok az farklılık gösterir.

Görünümü doğrudan HTML dosyanıza meta etiketi olarak eklemek istiyorsanız, aşağıdaki kodu kullanabilirsiniz:

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

Bu durumda genişlik, ilgili cihazın ekran genişliğine (width=device-width) uyum sağlayacak şekilde tanımlanmaktadır. initial-scale, başlangıç ​​yakınlaştırma faktörünü ifade etmektedir ve sayfanızın ilgili mobil cihazın ekranında 1:1 oranında görüntüleneceğini belirtir.

Ayrıca yüksekliği tanımlamak ve minimum ve/veya maksimum yakınlaştırma faktörünü yapılandırmak için bir görünüm alanı kullanılabilmektedir. Ek olarak bu meta etiketi ile kullanıcıların yakınlaştırma yapmasını engelleyebilirsiniz (user-scalable=no), bu kullanım erişebilirlik değerlerinizi düşürebilir.

Meta kodu yerine CSS dosyasında görünüm alanını belirtirseniz, doğru bir görüntüleme sağlamak için bunu dosyanın en başına koymanız daha sağlıklı bir kullanım olacaktır. İşte bu kodun nasıl görünebileceğine dair bir örnek:

@viewport {
width: device-width;
}

Tavsiye Ettiğim Viewport Kodu

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

Tavsiye ettiğimiz kod varsayılan olarak 1e1 açılacaktır. Fakat; kullanıcı gerektiğinde 5 scale değerine kadar yazıları, içerikleri yani siteyi yakınlaştırabilecektir. Bu geliştirme sitenizde kullanıcıların maksimum faydalanmasını sağlayacaktır. Aynı zamanda görme kaybı olanlar için okuma kolaylığı sağlar.

Pagespeed uyarısı : [user-scalable=”no”], öğesinde kullanılmış veya [maximum-scale] özelliği 5’ten küçük.

Uyarısını gidermek içinde yukarıdaki paylaştığımız kodu kullanabilirsiniz.

Tahir Dinç
Tahir Dinç

1999 yılında ilk çalışmalarıma başladım, 2004 yılında ODP editörü oldum. Günümüzde bir çok büyük firmaya SEO ve Google Ads hizmetleri sağlıyorum. SEO çalışması benim için işten daha fazlası diyebilirim. Türk SEM Blog sayfasında dijital pazarlama ile ilgili önemli ve faydalı bilgileri sizlerle paylaşıyoruz.

Leave a Reply

Your email address will not be published.Required fields are marked *