Jak używać
- Otwórz stronę. Wartości są od razu odczytywane z przeglądarki.
- Zmień rozmiar okna lub obróć urządzenie, aby zobaczyć, jak aktualizują się wymiary i orientacja obszaru roboczego.
- Użyj opcji „Kopiuj wszystko”, aby wkleić dane do zgłoszenia błędu lub prośby o pomoc.
Jak to działa
Przeglądarki podają wymiary w pikselach CSS — jednostce używanej do układu stron internetowych. Na ekranach o dużej gęstości jeden piksel CSS jest wyświetlany jako kilka pikseli fizycznych. Współczynnik pikseli urządzenia (DPR) określa ich liczbę. Telefon zgłaszający rozdzielczość 390 × 844 przy DPR równym 3 ma panel o rozdzielczości około 1170 × 2532 pikseli urządzenia. Na komputerach zarówno powiększenie strony w przeglądarce, jak i skalowanie ekranu w systemie operacyjnym zmieniają DPR oraz wymiary w pikselach CSS. Dlatego monitor 2560 × 1440 przy skalowaniu 125 % zgłasza rozdzielczość 2048 × 1152.
Rozdzielczość ekranu dotyczy całego wyświetlacza. Dostępna przestrzeń nie obejmuje stałych elementów systemu operacyjnego, takich jak pasek zadań Windows czy pasek menu macOS. Obszar roboczy (viewport) to część okna przeglądarki, w której wyświetlana jest strona — bez pasków narzędzi, ale z paskiem przewijania. To właśnie do obszaru roboczego odnoszą się zapytania o media CSS, takie jak min-width: 768px. Wartość tę należy sprawdzać podczas testowania układów responsywnych.
Schemat kolorów i ustawienie ograniczenia animacji pochodzą z tych samych funkcji mediów CSS, których strony używają do dostosowania się do ustawień systemowych. Informacje o markach, platformie i urządzeniu mobilnym pochodzą z User-Agent Client Hints, dostępnych tylko w przeglądarkach opartych na Chromium. Niektóre przeglądarki celowo zaokrąglają te wartości lub podają ich stałe wersje, aby utrudnić tworzenie odcisku przeglądarki. Dlatego mogą one nie odpowiadać dokładnie używanemu sprzętowi.
Przykłady
Testowanie układu responsywnego
Układ strony nie działa poprawnie na laptopie współpracownika. Wysłane przez niego dane pokazują obszar roboczy 1280 × 649 przy DPR 1.5. Ustaw taki sam obszar roboczy na pasku urządzeń w przeglądarce, aby odtworzyć problem.
Dobór rozmiarów obrazów
Obraz produktu jest wyświetlany na szerokość 400 pikseli CSS. Na telefonie z DPR równym 3 potrzeba 1200 pikseli, aby obraz był ostry. Dzięki temu wiesz, jakie rozmiary uwzględnić w srcset.
Sprawdzanie skalowania monitora
Monitor 3840 × 2160 zgłasza rozdzielczość 2560 × 1440 przy DPR 1.5: system Windows skaluje obraz do 150 %.
Często zadawane pytania
Dlaczego rozdzielczość ekranu różni się od danych technicznych monitora?
Przeglądarki podają wymiary w pikselach CSS, czyli pikselach fizycznych podzielonych przez współczynnik skalowania. Pomnóż tę wartość przez współczynnik pikseli urządzenia, aby uzyskać przybliżoną rozdzielczość sprzętową. Powiększenie strony w przeglądarce również zmienia podawaną wartość.
Czym różni się rozmiar ekranu od rozmiaru obszaru roboczego?
Rozmiar ekranu obejmuje cały wyświetlacz. Obszar roboczy to tylko część okna przeglądarki, w której wyświetlana jest strona, dlatego jest mniejszy i zmienia się po zmianie rozmiaru okna lub otwarciu narzędzi deweloperskich.
Czy te informacje służą do śledzenia mnie?
Nie przez tę stronę: wartości są wyświetlane tylko Tobie i nie są zapisywane ani nigdzie wysyłane. Strony internetowe mogą odczytywać te same dane, dlatego niektóre przeglądarki je zaokrąglają, aby utrudnić tworzenie odcisku przeglądarki.
Dlaczego mój laptop zgłasza obsługę dotyku?
Obsługa dotyku jest określana na podstawie liczby punktów dotyku zgłaszanych przez przeglądarkę. Laptopy z ekranem dotykowym zgłaszają tę funkcję nawet wtedy, gdy najczęściej używasz myszy. Niektóre sterowniki lub konfiguracje pulpitu zdalnego zgłaszają obsługę dotyku także wtedy, gdy urządzenie nie ma ekranu dotykowego.
Prywatność
Wszystkie wartości są odczytywane przez JavaScript w przeglądarce i wyświetlane tylko Tobie. Żadne dane nie są zapisywane, przesyłane ani uwzględniane w analityce. Rejestrowane jest jedynie anonimowe zdarzenie informujące o otwarciu i użyciu narzędzia.