Viewport, bir web sayfasının kullanıcı tarafından tarayıcı içinde görülebilen alanını ifade eder. Türkçede görüntü alanı veya görünür alan olarak da adlandırılabilir. Kullanıcı bir web sitesini açtığında sayfanın ekranda görünen bölümü viewport olarak değerlendirilir. Sayfanın aşağıda kalan ve kaydırma yapılmadan görünmeyen kısmı ise o anda viewport içinde yer almaz.
Viewport ile ekran boyutu aynı şey değildir. Ekran boyutu cihazın fiziksel ölçüsünü ifade ederken viewport, tarayıcı penceresinde web sayfasına ayrılan görünür alanı ifade eder. Örneğin bir telefonun ekranı belirli bir fiziksel boyuta sahip olabilir ancak tarayıcının kullandığı viewport, cihazın çözünürlüğüne, piksel yoğunluğuna, tarayıcı arayüzüne ve sayfanın ölçeklendirme ayarlarına göre farklılık gösterebilir. Masaüstü bilgisayarlarda ise kullanıcı tarayıcı penceresini daralttığında veya genişlettiğinde viewport ölçüsü değişir.
Bu kavramı daha iyi anlamak için device, screen ve browser ayrımını yapmak gerekir. Device, kullanıcının web sitesine erişmek için kullandığı telefon, tablet, dizüstü bilgisayar veya masaüstü bilgisayar gibi donanımı ifade eder. Screen, cihazın fiziksel ekranını ve çözünürlüğünü anlatır. Browser ise Google Chrome, Safari, Firefox veya Microsoft Edge gibi web sayfalarını görüntülemeyi sağlayan tarayıcı yazılımıdır. Viewport ise bu tarayıcı içinde web sayfasının kullanıcıya görünen bölümüdür.
Mobil cihazların yaygınlaşmasından önce birçok web sitesi daha çok masaüstü ekranlar düşünülerek tasarlanıyordu. Günümüzde ise kullanıcılar web sitelerine telefon, tablet, dizüstü bilgisayar ve farklı ekran ölçülerine sahip cihazlardan erişmektedir. Bu nedenle responsive, yani duyarlı web tasarımı büyük önem taşır. Responsive tasarım, sayfanın farklı viewport genişliklerine göre düzenini, yazı boyutlarını, görsellerini ve menü yapısını uyumlu hale getirir.
Mobil uyumlu web sitelerinde genellikle viewport meta etiketi kullanılır. Bu etiket, tarayıcıya sayfanın cihaz genişliğine göre nasıl ölçekleneceğini bildirir. Yaygın kullanımda viewport genişliği cihaz genişliğine eşitlenir ve başlangıç ölçeği 1 olarak tanımlanır. Bu yapı, mobil cihazlarda sayfanın gereksiz şekilde küçültülmesini veya masaüstü genişliğinde açılmasını önlemeye yardımcı olur.
Viewport ayarı tek başına mobil uyumluluk için yeterli değildir. Sayfanın CSS yapısı, kırılım noktaları, esnek grid sistemi, görsel boyutları, okunabilir yazı ölçüleri ve dokunmatik kullanım deneyimi de doğru planlanmalıdır. Örneğin masaüstünde yan yana görünen alanlar mobilde alt alta sıralanabilir, menü yapısı daha kompakt hale getirilebilir ve butonlar dokunmaya uygun boyutlarda tasarlanabilir. Doğru yapılandırılmış bir viewport ve responsive tasarım yaklaşımı, web sitesinin farklı cihazlarda daha kullanılabilir ve erişilebilir olmasını sağlar.
