Nasıl kullanılır?

Sayfayı açın. Değerler tarayıcınızdan hemen okunur.
Viewport boyutunun ve yönünün güncellenmesini görmek için pencereyi yeniden boyutlandırın veya cihazınızı döndürün.
Ayrıntıları bir hata raporuna veya destek talebine yapıştırmak için “Tümünü kopyala” seçeneğini kullanın.

Nasıl çalışır?

Tarayıcılar boyutları, web sayfalarının yerleşiminde kullanılan birim olan CSS pikseli cinsinden bildirir. Piksel yoğunluğu yüksek ekranlarda bir CSS pikseli, birden fazla fiziksel piksel ile çizilir. Cihaz piksel oranı (DPR), bu sayının kaç olduğunu gösterir. DPR değeri 3 olan ve 390 × 844 bildiren bir telefonun ekran paneli yaklaşık 1170 × 2532 cihaz pikselinden oluşur. Masaüstünde tarayıcı yakınlaştırması ve işletim sisteminin ekran ölçeklendirmesi hem DPR'yi hem de CSS boyutunu değiştirir. Bu nedenle ölçeklendirmesi %125 olan 2560 × 1440 boyutlu bir monitör 2048 × 1152 bildirir.

Ekran çözünürlüğü tüm ekranı kapsar. Kullanılabilir alan, Windows görev çubuğu veya macOS menü çubuğu gibi işletim sistemine ait kalıcı çubukları içermez. Viewport, tarayıcı penceresinde sayfanın gösterildiği alandır; araç çubuklarını içermez, kaydırma çubuğunu ise içerir. min-width: 768px gibi CSS medya sorguları viewport değerine göre çalışır. Bu nedenle duyarlı tasarımları test ederken kontrol etmeniz gereken ölçü budur.

Renk şeması ve hareketi azaltma değerleri, web sitelerinin sistem ayarlarınıza uyum sağlamak için kullandığı CSS medya özelliklerinden alınır. Marka, platform ve mobil bilgileri, yalnızca Chromium tabanlı tarayıcıların sağladığı User-Agent Client Hints verilerinden alınır. Bazı tarayıcılar parmak izinin çıkarılmasını zorlaştırmak için bu değerleri kasıtlı olarak yuvarlar veya sabitler; bu nedenle değerler donanımınızla tam olarak eşleşmeyebilir.

Örnekler

Duyarlı sayfa düzenini test etme

Bir iş arkadaşınızın dizüstü bilgisayarında sayfa düzeni bozuluyor. Ayrıntıları kopyaladığında viewport değerinin 1280 × 649, DPR değerinin ise 1.5 olduğunu görüyorsunuz. Sorunu yeniden oluşturmak için tarayıcınızın cihaz araç çubuğunu aynı viewport boyutuna ayarlayın.

Görsel boyutlarını seçme

Bir ürün görseli 400 CSS pikseli genişliğinde gösteriliyor. DPR değeri 3 olan bir telefonda net görünmesi için 1200 piksel gerekir; böylece srcset içine hangi boyutları ekleyeceğinizi belirleyebilirsiniz.

Monitör ölçeklendirmesini kontrol etme

3840 × 2160 boyutundaki bir monitör, DPR değeri 1.5 iken 2560 × 1440 bildiriyor: Windows ekranı %150 ölçeklendiriyor.

Sık sorulan sorular

Ekran çözünürlüğü neden monitörümün teknik özelliklerinden farklı?

Tarayıcılar, fiziksel piksellerin ölçeklendirme faktörüne bölünmesiyle elde edilen CSS pikseli değerlerini bildirir. Donanım çözünürlüğünü yaklaşık olarak bulmak için bu değeri cihaz piksel oranıyla çarpın. Tarayıcı yakınlaştırması da bildirilen değeri değiştirir.

Ekran boyutu ile viewport boyutu arasındaki fark nedir?

Ekran boyutu tüm ekranı kapsar. Viewport ise tarayıcı penceresinin içinde sayfanın görüntülendiği alandır. Bu nedenle daha küçüktür; pencereyi yeniden boyutlandırdığınızda veya geliştirici araçlarını açtığınızda değişir.

Bu bilgiler beni izlemek için kullanılıyor mu?

Bu sayfa aracılığıyla hayır: değerler yalnızca size gösterilir, saklanmaz veya başka bir yere gönderilmez. Web siteleri aynı değerleri okuyabilir. Bu yüzden bazı tarayıcılar parmak izinin çıkarılmasını zorlaştırmak için değerleri yuvarlar.

Dizüstü bilgisayarımda neden dokunmatik destek görünüyor?

Dokunmatik desteği, tarayıcının bildirdiği dokunma noktası sayısına göre belirlenir. Dokunmatik ekranlı dizüstü bilgisayarlar, çoğunlukla fare kullansanız bile bu bilgiyi bildirir. Bazı sürücüler veya uzak masaüstü yapılandırmaları da dokunmatik ekran olmasa bile dokunmatik destek bildirir.

Gizlilik

Tüm değerler tarayıcınızda JavaScript ile okunur ve yalnızca size gösterilir. Hiçbir şey saklanmaz, yüklenmez veya analiz verilerine eklenmez; yalnızca aracın açılıp kullanıldığını belirten anonim bir etkinlik kaydedilir.