Ekran Boyutu Algılayıcı
Viewport boyutunuzu ve ekran çözünürlüğünüzü anında algılayın. Tarayıcıyı yeniden boyutlandırdıkça boyutlar gerçek zamanlı güncellenir. Ücretsiz, %100 tarayıcınızda.
Referans
Viewport vs ekran çözünürlüğü — fark nedir?
Viewport, tarayıcı penceresinin içindeki web sayfasının görünür alanıdır ve CSS pikselleriyle ölçülür (window.innerWidth × window.innerHeight). Tarayıcıyı yeniden boyutlandırdığınızda veya DevTools açtığınızda değişir. Ekran çözünürlüğü, fiziksel ekranınızın toplam piksel sayısıdır (screen.width × screen.height) — donanım ve ekran ayarlarınız tarafından sabitlenir. Duyarlı web tasarımı için önemli olan viewport'tur — hangi CSS media query'lerinin ve kesme noktalarının aktif olduğunu belirler.
Cihaz piksel oranı (DPR) nedir?
Cihaz Piksel Oranı (DPR), kaç fiziksel (donanım) pikselin bir CSS pikseline eşlendiğini söyler. 1 DPR, 1:1 eşleme anlamına gelir (standart ekranlar). 2 DPR, Retina/HiDPI ekran anlamına gelir — her CSS pikseli 4 fiziksel pikselle (2×2) render edilir, daha keskin metin ve görüntüler üretir. 3 DPR, üst düzey akıllı telefonlarda yaygındır. Bu şunlar için önemlidir: yüksek DPR ekranlarına @2x/@3x görüntüler sunmak, Retina ekranlardaki ekran görüntülerinin neden beklenen çözünürlüğün iki katı olduğunu anlamak ve yalnızca belirli DPR değerlerinde ortaya çıkan düzen sorunlarını ayıklamak.
Ekran algılama kullanım alanları
Duyarlı tasarım testi — DevTools açmadan CSS kesme noktalarının doğru viewport genişliklerinde tetiklendiğini doğrulayın. Hata raporları — görüntüleme sorunlarını geliştiricilere bildirirken tam viewport boyutlarını, ekran çözünürlüğünü ve DPR'ı paylaşın. Ekran görüntüsü planlaması — dokümantasyon veya uygulama mağazası listeleri için ekran görüntüleri almadan önce tam boyutları bilin. Reklam ve banner boyutlandırma — viewport boyutlarının görüntülü reklam için gerekli reklam yuvası boyutlarıyla eşleştiğini doğrulayın.
Gizlilik
Ekran boyutları tarayıcı API'lerinizden yerel olarak okunur. Hiçbir veri sunucuya gönderilmez.