Görüntü Alanı Boyutu ve Duyarlı Kesme Noktası Testi

Görüntü alanı, bir web sayfasının çizim yapabileceği alandır — tarayıcı pencereniz eksi sekmeler, adres çubuğu ve kaydırma çubukları. Bu yüzden neredeyse her zaman ekran çözünürlüğünden daha küçüktür: ekran panelin tamamıyken, görüntü alanı sayfanın kullanabileceği dilimdir. Fiziksel noktalar yerine CSS pikselleriyle, yani düzen birimleriyle ölçülür — yüksek yoğunluklu 'Retina' ekranlar her CSS pikseline iki veya üç fiziksel piksel sığdırarak metnin daha keskin görünmesini sağlar; window.devicePixelRatio bu çarpanı bildirir.

Bu araç, her boyut ve yön değişikliğinde window.innerWidth ve window.innerHeight değerlerini; documentElement.clientWidth/clientHeight üzerinden yerleşim görüntü alanını, cihaz piksel oranınızı ve yönünüzü okur. Kesme noktası, bir düzenin değiştiği görüntü alanı genişliğidir — sütunlar üst üste yığılır, menü daralır, yazı boyutları değişir — ve Tailwind CSS gibi framework'ler, adlandırılmış genişliklerden yukarıya doğru stil uygular. Aşağıdaki referans, genişliğinizin hangi aralığa düştüğünü vurgular; sürüklenebilir test paneli ise kendi genişliğinin ulaşacağı kesme noktasını bildirir, böylece tüm pencerenizi yeniden boyutlandırmadan bir bileşeni önizleyebilirsiniz. Her şey yerel olarak çalışır; hiçbir şey yüklenmez.

Sayılar yanlış görünüyorsa, panelinizin çözünürlüğü ile sayfanın gördüğü görüntü alanı arasında birkaç şey devreye girer. Tarayıcı arayüzü ve kaydırma çubukları kullanılabilir alandan pay alır, sayfa büyütme ise CSS piksel sayısını azaltır — yani innerWidth, pencere hareket etmeden düşer — işletim sistemi ekran ölçeklendirmesi de aynı etkiyi yapar, bu yüzden iki aynı monitör farklı boyutlar bildirebilir. Telefonlarda meta viewport etiketi, <meta name="viewport" content="width=device-width, initial-scale=1">, ~980 piksellik bir masaüstünü taklit etmek yerine sayfayı cihaz genişliğinde düzenler; böylece DPR 3'teki 390 pikselik bir görüntü alanı, yaklaşık 1170 fiziksel piksel genişliğindeki bir panele karşılık gelir. Ekranınızın tam fiziksel çözünürlüğünü ve piksel yoğunluğunu görmek için What Is My Screen Size ve Screen Resolution Test araçlarını kullanın.

Yaygın duyarlı kesme noktaları