DARMOWE NARZĘDZIE

Sprawdź rozdzielczość ekranu

Błyskawicznie sprawdź screen, viewport, DPR, proporcje i orientację. Darmowe narzędzie diagnostyczne bez rejestracji. Profesjonalne narzędzie online, które działa w Twojej przeglądarce. Szybko, bezpiecznie i bez instalowania zbędnego oprogramowania.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Sprawdź Rozdzielczość Ekranu

Profesjonalna diagnostyka wyświetlacza i parametrów przeglądarki w czasie rzeczywistym.

Tryb Live Active

Twoja rozdzielczość ekranu

0 × 0

Viewport: 0 × 0

Współczynnik (DPR) 1.0

Orientacja -

Głębia kolorów -

Język -

Zaawansowane statystyki

Proporcje (Ratio) -

Punkty dotyku -

Wsparcie HDR -

Gamut kolorów -

Motyw systemu -

Dostępna przestrzeń

0 × 0 px

Obszar bez pasków zadań i menu systemowych.

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Sprawdź rozdzielczość ekranu – od razu wiesz, co widzi Twoja przeglądarka

Są dwie rozdzielczości, które ludziom mylą się non stop: ekran (fizyczna siatka pikseli) i viewport (to, ile miejsca ma strona w oknie przeglądarki). To narzędzie pokazuje obie wartości na żywo, plus kilka „smaczków” typu DPR, proporcje, orientacja, głębia kolorów i kilka rzeczy, które przydają się w testach albo zdalnej pomocy.

darmowe online bez rejestracji wynik na żywo screen + viewport DPR / ratio / HDR

Jeśli kiedykolwiek ktoś powiedział Ci „mam rozdzielczość 1920×1080”, a Ty i tak widziałeś, że strona łamie się jak akordeon – to prawdopodobnie chodziło o viewport, a nie o rozdzielczość ekranu. W praktyce: to viewport decyduje, jak układ naprawdę się zachowuje.

Co dokładnie pokaże Ci ten test rozdzielczości?

Wynik jest czytelny już na pierwszy rzut oka: duży licznik pokazuje Twoją rozdzielczość ekranu, a pod nim leci Viewport – czyli „robocza przestrzeń” przeglądarki. Do tego dostajesz zestaw parametrów, które zwykle trzeba wyciągać z DevTools albo zgadywać: DPR (devicePixelRatio), orientację, głębię kolorów, język przeglądarki, a w „zaawansowanych statystykach” także proporcje (aspect ratio), liczbę punktów dotyku, wsparcie HDR, gamut kolorów i preferencję motywu.

Ekran (Screen)

To „twarda” informacja o tym, ile pikseli ma ekran w osi X i Y. Przydaje się, gdy diagnozujesz: monitor, laptop, telewizor, ustawienia skalowania albo to, czy ktoś nie pracuje na ekranie zewnętrznym. W skrócie: to jest maksimum, jakie urządzenie może wyświetlić.

Viewport (okno przeglądarki)

To najważniejsza liczba dla weba. Viewport mówi, ile realnie miejsca ma strona w danym momencie, po odjęciu UI przeglądarki, pasków, sidebara, zoomu, a czasem nawet systemowych elementów. To viewport decyduje o breakpointach w CSS i tym, kiedy układ „przeskakuje”.

Dlaczego „dostępna przestrzeń” potrafi być mniejsza niż ekran?

Parametr „dostępna przestrzeń” (available) pokazuje obszar, który zostaje po odjęciu elementów systemu: paska zadań, docka, menu. To jeden z tych detali, które ratują czas, kiedy ktoś mówi: „mam 2560×1440”, a Ty widzisz, że aplikacja w trybie pełnoekranowym i tak nie mieści panelu bocznego. Dla diagnostyki stanowisk (home office, monitory ultrapanoramiczne, stacje dokujące) to złoto.

Te parametry robią różnicę w praktyce

Same liczby w pikselach są fajne, ale dopiero dodatki tłumaczą „dlaczego wygląda inaczej”. Poniżej masz krótką mapę tego, co jest czym – bez technicznego żargonu, tylko to, co faktycznie pomaga.

DPR

Device Pixel Ratio mówi, czy „1 px w CSS” to faktycznie 1 piksel fizyczny. Na ekranach HiDPI (np. Mac, wiele telefonów) DPR bywa 2 albo 3 – i wtedy grafiki oraz cienkie linie mogą zachowywać się inaczej.

RATIO

Proporcje ekranu (np. 16:9, 21:9) są kluczowe w wideo, grach, dashboardach i prezentacjach. Inaczej projektujesz wideopanel dla 21:9, inaczej dla 4:3.

HDR

HDR bywa ważne w testach materiałów video i zdjęć. Jeśli ktoś zgłasza „sprane kolory” albo „za ciemno”, ten parametr szybko podpowie, czy urządzenie w ogóle wspiera szeroki zakres dynamiki.

GAMUT

Gamut kolorów (np. sRGB / P3) wpływa na to, czy kolory są bardziej „soczyste” i czy grafika wygląda tak samo u wszystkich. Dla projektantów i e-commerce to często temat numer jeden.

TOUCH

Punkty dotyku pomagają wykryć, czy użytkownik jest na ekranie dotykowym albo hybrydzie. Jeśli interfejs ma gesty lub duże przyciski, to jest szybki trop.

THEME

Motyw systemu (jasny/ciemny) jest ważny, gdy testujesz dark mode. Czasem „błąd” to po prostu brak stylów dla jednej z wersji.

Jak użyć narzędzia krok po kroku (bez kombinowania)

Nie musisz nic wpisywać. Narzędzie czyta parametry z urządzenia i przeglądarki, a wynik aktualizuje się automatycznie (np. po zmianie rozmiaru okna). Jeśli chcesz mieć „moment w czasie” do wysłania komuś – użyj zapisu raportu albo kopiowania podsumowania.

Otwórz stronę z narzędziem i spójrz na dwa duże wyniki: Rozdzielczość ekranu i Viewport.
Zmień rozmiar okna przeglądarki lub obróć urządzenie (telefon/tablet), żeby zobaczyć, jak viewport się zmienia.
Kliknij „Kopiuj podsumowanie”, jeśli chcesz wkleić wynik na czat (np. do supportu albo do zespołu dev).
Kliknij „Zapisz raport diagnostyczny”, jeśli potrzebujesz historii i pełniejszego zestawu danych (przydatne w zgłoszeniach).

Przykład z życia: „strona się rozjeżdża”

Użytkownik mówi: „mam 1920×1080, a koszyk się nie mieści”. Ty patrzysz w wynik i widzisz: ekran 1920×1080, ale viewport 1365×768. I nagle wszystko ma sens: skalowanie, pasek zakładek, powiększenie, aplikacja w oknie, a nie na pełnym ekranie. Wniosek: problem jest w breakpointach i testowaniu na samym „screen”, bez sprawdzenia viewportu.

Przykład: grafika „nieostra”

Jeśli ktoś narzeka, że ikony są „rozmyte”, sprawdzasz DPR. Przy DPR=2 standardowa grafika 1× może wyglądać gorzej. Wtedy wiesz, że trzeba podawać wersje 2×/3× albo używać SVG. To jeden z tych detali, które rozwiązują temat w 30 sekund.

Najpopularniejsze rozdzielczości i proporcje – szybka ściąga

Nie ma jednego „najlepszego” rozmiaru, ale są standardy, które wracają w testach jak bumerang. Poniższa tabela pomoże Ci w rozmowie: „co to za format”, „czy to ultrapanorama”, „czemu wideo ma pasy”.

Rozdzielczość	Proporcje	Typowe użycie	Wskazówka praktyczna
1920×1080	16:9	Laptopy/monitory, TV	Najczęstszy „punkt odniesienia”, ale viewport bywa dużo mniejszy.
1366×768	16:9	Starsze laptopy	Wciąż spotykane – świetny test „ciasnych” layoutów.
2560×1440	16:9	Monitory QHD	Uwaga na skalowanie – różne ustawienia = różny viewport.
3840×2160	16:9	4K monitory/TV	Przy 4K często rośnie DPR/skalowanie, a UI robi się „mniejsze”.
2560×1080	21:9	Ultrapanorama	Panel boczny + treść mogą wyglądać idealnie… albo przesadnie rozciągnięte.
3440×1440	21:9	Ultrapanorama (popularna)	Sprawdź, czy układ nie robi „pustyni” po bokach.
1024×768	4:3	Stare ekrany / kioski	Jeśli robisz panele dla firm, kiosk 4:3 nadal się zdarza.

Kiedy to narzędzie jest najbardziej przydatne?

To nie jest tylko „ciekawostka”. Jeśli pracujesz z webem, supportem, ecommerce albo tworzysz interfejsy, ten zestaw danych oszczędza mnóstwo ping-ponga w komunikacji. Zamiast „a możesz zrobić screena?” masz konkretne liczby i parametry środowiska.

Debugowanie RWD: breakpointy, overflow, elementy „uciekające” poza ekran.
Zdalna pomoc: szybkie podsumowanie do wysłania na czat / w ticket.
Testy UI: porównanie zachowania na różnych DPI, motywach i proporcjach.
Wideo i grafika: HDR, gamut, proporcje – czy materiał ma sens na danym sprzęcie.
Analiza środowiska: user agent, platforma, język przeglądarki.

FAQ – pytania, które wracają najczęściej

Czym różni się rozdzielczość ekranu od viewportu?

Rozdzielczość ekranu (screen) to liczba pikseli całego wyświetlacza. Viewport to przestrzeń, w której renderuje się strona w przeglądarce – czyli okno bez „ramek”, pasków i elementów UI. W praktyce do projektowania i debugowania stron ważniejszy jest viewport, bo to on decyduje o tym, kiedy wchodzą breakpointy i jak układ się łamie.

Dlaczego mam „duży ekran”, a viewport jest mały?

Najczęściej winne są: skalowanie systemu, powiększenie strony (zoom), paski narzędzi przeglądarki, tryb okienkowy, sidebar, albo po prostu to, że aplikacja nie jest na pełnym ekranie. Dodatkowo na laptopach część wysokości „zjada” pasek zadań i górne belki. Dlatego viewport jest realną przestrzenią, a screen tylko teoretycznym maksimum.

Co to jest DPR i czemu powinno mnie obchodzić?

DPR (devicePixelRatio) mówi, ile pikseli fizycznych przypada na 1 piksel CSS. Na ekranach HiDPI DPR jest większe niż 1, co wpływa na ostrość grafik, grubość linii, renderowanie ikon i ogólną „kruchość” layoutów. Jeśli coś wygląda rozmyte, a DPR jest 2 lub 3, to często sygnał, że grafiki rastrowe są podane w zbyt niskiej gęstości.

Czy wynik zależy od przeglądarki?

Tak, zwłaszcza viewport. Różne przeglądarki mają różne paski, różne zachowanie UI, a na mobile dochodzą dynamiczne belki adresu. Screen jest zwykle stabilniejszy, ale viewport może się zmieniać nawet w trakcie scrollowania (szczególnie na telefonach). Dlatego w zgłoszeniach warto podawać oba parametry i przeglądarkę (user agent/platformę).

Po co mi informacja o gamucie (sRGB/P3)?

Jeśli zajmujesz się designem, fotografią, wideo lub e-commerce, gamut ma realne znaczenie. Na ekranach P3 kolory mogą wyglądać intensywniej. To bywa super, ale może też ujawnić różnice w przygotowaniu grafik. Jeśli ktoś mówi „kolory u mnie są inne”, gamut jest jednym z pierwszych tropów, zanim zaczniesz polować na „błąd w CSS”.

Czy zapis raportu jest bezpieczny? Co jest zapisywane?

Zapis raportu służy temu, żebyś miał(a) punkt odniesienia i mógł/mogła wrócić do danych. Typowo zapis obejmuje parametry środowiska: wymiary ekranu, viewport, dostępny obszar, DPR, orientację, głębię kolorów, język, platformę oraz user agent, a także kilka dodatkowych pól (proporcje, punkty dotyku, HDR, gamut, motyw, PDF, cookies). Jeśli przekazujesz raport komuś zewnętrznemu, traktuj user agent jako informację techniczną – przydaje się w diagnostyce, ale nie musisz go publikować „wszędzie”.

Jak najszybciej wysłać wynik do supportu lub devów?

Najprościej: użyj przycisku kopiowania podsumowania. Wklejasz do wiadomości i od razu widać kluczowe dane: screen, viewport, ratio, DPR i motyw. Jeśli sprawa jest bardziej złożona (np. bug w specyficznych warunkach), lepiej zapisać raport, bo wtedy dochodzą dodatkowe pola diagnostyczne i łatwiej porównać konfiguracje.

Mały trik na koniec: testuj w ruchu, nie „na sucho”

Jeśli chcesz naprawdę złapać problem z layoutem, nie patrz tylko na jeden statyczny wynik. Zmień rozmiar okna, przełącz full screen, obróć urządzenie, sprawdź zoom przeglądarki. Ten test jest po to, żebyś zobaczył(a) różnicę na żywo i zrozumiał(a), skąd biorą się „magiczne” bugi, które występują u jednych, a u innych nie.

Przejdź do narzędzia i sprawdź wynik