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.