Title: Viewport Author: Kriko Published: 28 Nisan 2021 Last modified: 11 Temmuz 2026 --- 1. [Anasayfa](https://kriko.io/tr/) / 2. [Sözlük](https://kriko.io/tr/sozluk) / 3. V Harfi # Viewport Viewport, kullanıcıların bir web sayfasında görüntüleyebildiği alanların tamamına deniyor. **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. ## Sözlükte keşfedin ### Hreflang Etiketi Hreflang etiketi, içeriklerinizin farklı dil ve bölge hedeflerine de ulaşmasını sağlayabilen bir HTML kodudur. ### Generative AI Generative AI, insan zihninin düşünme biçimini taklit ederek içerik üretme özelliğine sahip olan bir yapay zeka sistemidir. ### Elektronik Ticaret Kanunu (ETK) Elektronik Ticaret Kanunu (ETK), dijital ortamda B2C (Firmadan Tüketiciye), B2B ( Firmadan Firmaya) ve C2C (Tüketiciden Tüketiciye) bağlamda ticaret yapan tüm gerçek ve tüzel kişilerin menfaatini korumak amacıyla gerekli olan yasal düzenlemeler bütünüdür. ### Kayıp Müşteri Oranı (Churn Rate) Kayıp müşteri oranı (Churn Rate), bir şirketin ürün ya da hizmetlerini belirli bir zaman diliminde satın almayı / kullanmayı bırakan kişilerin yüzdesi anlamına gelir. ### Stil Şablonları (Cascading Style Sheets – CSS) Stil şablonları (Cascading Style Sheets - CSS), HTML ve JavaScript ile beraber en temel web teknolojileri arasında olan, sitelerin görsel olarak şekillenmesini sağlayan bir tanımlama dili. ### Uygulama Programlama Arayüzü (API) Uygulama programlama arayüzü (Application Programming Interface - API), bir uygulamanın fonksiyonlarına dışarıdan / uzaktan erişilip bu işlevlerin kullanılmasını sağlar. ### HTTP Durum Kodları: 4xx 4xx durum kodları, erişilmek istenen web sitesine / sayfasına ulaşılamadığı zaman ortaya çıkan HTTP durum kodları arasındadır. ### Domain Otoritesi Domain otoritesi (Domain Authority), bir diğer adıyla da alan adı otoritesi, web sitelerinin belirli değerler sistemi içerisinde puanlandığı bir sistemdir. ### Etkileşimli İçerik Etkileşimli içerik; izleyicilerin, dinleyicilerin ya da okuyucuların bir içeriği izlemenin veya okumanın ötesinde ona aktif biçimde katılımlarını sağlayan bir içerik türüdür. ## Dijitalin nabzını bizimle takip et Dijital dünyayı şekillendiren seçilmiş içgörüler, haberler ve fikirlerden haberdar olmak için abone olun. Bu kutucuğu işaretleyerek [gizlilik ve aydınlatma](https://kriko.io/tr/gizlilik-politikasi) metnimizi kabul ettiğinizi onaylamış olursunuz.