Tasarımcılar ve yazılımcılar için: Pencere ve ekran boyutunuzu anlık görün. Boyut değiştikçe güncellenir.
— × — px
innerWidth × innerHeight— × — px
screen.width × screen.height— × — px
Görev çubuğu vb. hariç—
devicePixelRatioPencereyi yeniden boyutlandırdığınızda değerler otomatik güncellenir.
Pencere boyutu (innerWidth × innerHeight), tarayıcıda gördüğünüz alanın piksel cinsinden ölçüsüdür; responsive tasarım ve breakpoint’ler bu değere göre yapılır. Ekran çözünürlüğü (screen.width/height) ise monitör veya cihazın fiziksel çözünürlüğüdür. Piksel oranı (DPR) Retina gibi yüksek yoğunluklu ekranlarda 2 veya daha fazla olabilir. Tasarımcı ve yazılımcılar bu araçla kendi cihazlarının değerlerini kontrol edebilir.
Pencere, tarayıcı penceresinin içindeki görünen alandır (sekme çubuğu hariç). Ekran ise monitörün veya cihazın tam çözünürlüğüdür.
Retina ve benzeri ekranlarda 1 CSS pikseli birden fazla donanım pikseline karşılık gelir. DPR 2 ise görüntü 2x yoğunluktadır; keskin görüntü için 2x görseller kullanılır.
Görev çubuğu, menü çubuğu veya sistem alanları düşüldükten sonra kalan alandır. Tam ekran pencereler için referans alınır.
Hayır. Tüm hesaplama tarayıcınızda yapılır; ekran bilgisi sunucuya gönderilmez.
Medya sorguları ve JS’te genelde pencere boyutu (innerWidth / matchMedia) kullanılır; böylece kullanıcının gerçek görüntü alanına göre düzen yapılır.
Evet. Telefon ve tablette de pencere ve ekran değerleri doğru şekilde gösterilir; mobil tarayıcıda test için kullanabilirsiniz.
Evet. Araç tamamen ücretsizdir; kayıt gerekmez.
Pencere boyutu, tarayıcı penceresini büyütüp küçülttükçe değişir. Ekran ve DPR genelde sabittir; sadece pencere alanı resize ile güncellenir.
Tüm boyutlar piksel (px) cinsindendir. CSS’teki px ile aynı mantık; DPR 1’de 1 CSS px = 1 cihaz pikseli.