Detektor Rozmiaru Ekranu
Wykryj natychmiast rozmiar viewport i rozdzielczość ekranu. Wymiary aktualizują się w czasie rzeczywistym przy zmianie rozmiaru przeglądarki. Bezpłatnie, 100% w przeglądarce.
Dokumentacja
Viewport vs rozdzielczość ekranu — czym się różnią?
Viewport to widoczny obszar strony internetowej w oknie przeglądarki, mierzony w pikselach CSS (window.innerWidth × window.innerHeight). Zmienia się przy zmianie rozmiaru przeglądarki lub otwarciu DevTools. Rozdzielczość ekranu to całkowita liczba pikseli fizycznego wyświetlacza (screen.width × screen.height) — jest ustalona przez sprzęt i ustawienia wyświetlacza. W responsywnym projektowaniu stron to viewport ma znaczenie — określa, które zapytania mediów CSS i punkty przełamania są aktywne.
Czym jest współczynnik pikseli urządzenia (DPR)?
Współczynnik Pikseli Urządzenia (DPR) mówi, ile fizycznych (sprzętowych) pikseli odpowiada jednemu pikselowi CSS. DPR 1 oznacza mapowanie 1:1 (standardowe wyświetlacze). DPR 2 oznacza wyświetlacz Retina/HiDPI — każdy piksel CSS jest renderowany 4 fizycznymi pikselami (2×2), dając ostrzejszy tekst i obrazy. DPR 3 jest powszechny na flagowych smartfonach. Ma to znaczenie dla: serwowania obrazów @2x/@3x na ekranach o wysokim DPR, zrozumienia dlaczego zrzuty ekranu na wyświetlaczach Retina mają dwukrotnie oczekiwaną rozdzielczość, oraz debugowania problemów z layoutem występujących tylko przy określonych wartościach DPR.
Zastosowania wykrywania rozmiaru ekranu
Testowanie responsywności — sprawdź, czy punkty przełamania CSS aktywują się przy prawidłowych szerokościach viewport bez otwierania DevTools. Raporty błędów — udostępniaj dokładne wymiary viewport, rozdzielczość ekranu i DPR przy zgłaszaniu problemów z wyświetlaniem programistom. Planowanie zrzutów ekranu — znaj dokładne wymiary przed robieniem zrzutów do dokumentacji lub list w sklepach z aplikacjami. Rozmiary reklam i banerów — weryfikuj, czy wymiary viewport odpowiadają wymaganym rozmiarom slotów reklamowych.
Prywatność
Wymiary ekranu są odczytywane lokalnie z API przeglądarki. Żadne dane nie są wysyłane na serwer.