Görüntü Alanı Boyutu ve Duyarlı Kesme Noktası Testi
Tarayıcı pencerenizin bir web sayfası için gerçekte ne kadar büyük olduğunu görün. Bu araç görüntü alanı genişliğinizi ve yüksekliğinizi CSS piksel cinsinden, cihaz piksel oranınızı ve yönünüzü okur, ayrıca mevcut boyutun hangi duyarlı kesme noktasına düştüğünü gösterir — hepsi canlı olarak. Pencereyi yeniden boyutlandırın, her değer anında güncellensin.
Tarayıcı pencerenizi yeniden boyutlandırın ve bu değerlerin canlı güncellenmesini izleyin.
Tailwind CSS kesme noktaları
Görüntü alanınızın düştüğü aralık, siz yeniden boyutlandırdıkça vurgulanır.
| Önek | Minimum genişlik | Şuradan itibaren geçerli |
|---|---|---|
| base | 0px | 0 – 639px |
| sm | 640px | 640 – 767px |
| md | 768px | 768 – 1023px |
| lg | 1024px | 1024 – 1279px |
| xl | 1280px | 1280 – 1535px |
| 2xl | 1536px | 1536px+ |
Cihaz kategorileri
Yeniden boyutlandırılabilir test paneli
Bu paneli yeniden boyutlandırmak için sağ alt köşesini sürükleyin. Kendi boyutunu ve bu genişliğin hangi kesme noktasına denk geleceğini bildirir — hızlı bir duyarlılık ölçeri.
Yaygın cihaz görüntü alanı boyutları
Referans için yaklaşık dikey CSS piksel görüntü alanları — gerçek değerler tarayıcıya ve işletim sistemine göre değişir.
| Cihaz | Görüntü alanı (CSS px) | DPR |
|---|---|---|
| iPhone SE | 375 × 667 | 2× |
| iPhone 15 / 14 Pro | 393 × 852 | 3× |
| Pixel 8 | 412 × 915 | 2.6× |
| iPad mini | 768 × 1024 | 2× |
| iPad Pro 11" | 834 × 1194 | 2× |
| Surface Pro | 912 × 1368 | 2× |
| Laptop (720p) | 1280 × 720 | 1× |
| Laptop (1080p) | 1366 × 768 | 1× |
| Desktop (1080p) | 1920 × 1080 | 1× |
İlgili araçlar
Görüntü alanı nedir
Görüntü alanı, bir web sayfasının çizim yapabileceği görünür alandır — sekmeler, adres çubuğu veya yer imleri çubuğu hariç, tarayıcı penceresinin içerik bölgesidir. Bu yüzden neredeyse her zaman ekran çözünürlüğünüzden daha küçüktür: ekran panelin tamamıyken görüntü alanı sayfanın kullanabildiği dilimdir. window.innerWidth ve window.innerHeight bu alanı CSS piksel cinsinden bildirir; documentElement.clientWidth/clientHeight ise düzen görüntü alanını (klasik bir kaydırma çubuğu varsa onun genişliği çıkarılmış aynı alanı) bildirir. Görüntü alanı, pencereyi yeniden boyutlandırdığınız, ekranı böldüğünüz veya cihazı döndürdüğünüz anda değiştiği için, duyarlı düzenlerin gerçekte tepki verdiği sayı budur.
CSS piksel ile cihaz pikseli ve devicePixelRatio
CSS pikseli panel üzerinde fiziksel bir nokta değil, bir düzen birimidir. Standart bir ekranda bir CSS pikseli tek bir fiziksel piksele karşılık gelir, ancak yüksek yoğunluklu 'Retina' ekranlar metnin daha keskin görünmesi için her CSS pikseline iki veya üç fiziksel piksel sıkıştırır. window.devicePixelRatio size bu çarpanı söyler: 2 değeri, 1440 CSS piksel genişliğindeki bir görüntü alanının 2880 fiziksel pikselle çizildiği anlamına gelir. Web sayfaları CSS piksel cinsinden düzenlendiğinden, 390 piksel genişliğinde görüntü alanı ve 3 DPR bildiren bir telefonun fiziksel paneli yaklaşık 1170 piksel genişliğindedir. 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.
Duyarlı kesme noktaları
Kesme noktası, bir düzenin değiştiği görüntü alanı genişliğidir — sütunlar alt alta dizilir, bir menü daralır, yazı tipi boyutu değişir. CSS medya sorguları ve Tailwind CSS gibi yardımcı program çerçeveleri, küçük bir dizi adlandırılmış genişlik tanımlar ve stilleri o genişlikten itibaren uygular. Tailwind'in varsayılanları 640px'de sm, 768px'de md, 1024px'de lg, 1280px'de xl ve 1536px'de 2xl'dir; 640px'in altında önek almayan base aralığındasınızdır. Aşağıdaki referans, siz yeniden boyutlandırdıkça etkin aralığı vurgular ve sürüklenebilir test paneli, kendi genişliğinin hangi kesme noktasına denk geleceğini bildirir — bir bileşenin farklı boyutlarda nasıl davrandığını, tüm pencerenizi değiştirmeden önizlemenin hızlı bir yolu.
innerWidth neden ekran genişliğinden farklı
Panelinizin çözünürlüğü ile bir sayfanın gördüğü görüntü alanı arasında birkaç şey bulunur. Tarayıcı arayüzü (sekmeler, araç çubukları ve görünür bir kaydırma çubuğu) kullanılabilir alandan pay çıkarır. Sayfa yakınlaştırması da bunu değiştirir: yakınlaştırma sığan CSS piksel sayısını azaltır, bu yüzden pencere hareket etmese bile innerWidth düşer ve devicePixelRatio'yu da etkiler. Mobilde, meta viewport etiketi — <meta name="viewport" content="width=device-width, initial-scale=1"> — tarayıcıya düzen görüntü alanını ~980px'lik bir masaüstü gibi davranmak yerine cihaz genişliğine ayarlamasını söyler; duyarlı sitelerin bu etikete ihtiyaç duymasının nedeni budur. İşletim sistemi ekran ölçeklendirmesi de CSS piksel sayısını değiştirir, bu yüzden iki özdeş monitör farklı görüntü alanı boyutları bildirebilir.