Jaka jest moja rozdzielczość ekranu?

Dane twojego monitora wykryte natychmiast — bez wchodzenia w ustawienia

Tester viewportu responsywnego

Wybierz preset szerokości, aby zobaczyć, jak treść przepływa przy różnych szerokościach viewportu. Wskaźnik rozmiaru aktualizuje się na żywo.

Pełna szerokość
— px szerokości przy tym presecie
Uwaga: ramki iframe z innych domen są blokowane przez większość witryn. To pole podglądu symuluje tylko szerokość.

Punkty graniczne projektowania — referencja

Popularne punkty graniczne CSS używane przez popularne frameworki. Twoja bieżąca szerokość viewportu jest wyróżniona.

Nazwa Zakres punktu granicznego Typowe zastosowanie

Referencja popularnych rozdzielczości ekranów

Nazwa / Urządzenie Rozdzielczość Proporcje DPR Popularne urządzenia Kategoria

User agent przeglądarki

Ładowanie…

Co to wszystko oznacza?

Rozdzielczość ekranu

Rozdzielczość ekranu to całkowita liczba pikseli, które może wyświetlić twój monitor, wyrażona jako szerokość × wysokość (np. 1920×1080). Jest to właściwość sprzętowa — nie zmienia się, dopóki nie zmienisz jej w ustawieniach wyświetlacza. Wyższa rozdzielczość = więcej pikseli = ostrzejszy obraz i więcej treści na ekranie.

Gęstość pikseli (DPR)

DPR to stosunek pikseli fizycznych do pikseli CSS (logicznych). DPR równy 2 oznacza, że każdy piksel CSS jest rysowany za pomocą 2×2 = 4 pikseli fizycznych, dzięki czemu wszystko wygląda ostrzej na ekranach "Retina" lub "HiDPI". Większość nowoczesnych smartfonów ma DPR ≥ 2; wiele MacBooków ma DPR = 2; niektóre telefony z Androidem mają DPR = 3 lub wyższy.

Dla programistów webowych: użyj @media (-webkit-min-device-pixel-ratio: 2) lub window.devicePixelRatio w JavaScript, aby serwować obrazy w wyższej rozdzielczości na ekranach HiDPI.

Viewport a rozdzielczość ekranu

Rozdzielczość ekranu jest stała (np. 1920×1080). Twój viewport to obszar treści okna przeglądarki — zmniejsza się, gdy zmieniasz rozmiar przeglądarki, otwierasz elementy przeglądarki (DevTools, paski boczne) lub powiększasz. Zapytania mediów CSS reagują na rozmiar viewportu, a nie rozdzielczość ekranu. Rozmiar viewportu wyświetlany tutaj aktualizuje się na żywo podczas zmiany rozmiaru przeglądarki.

Głębia koloru

Głębia koloru (w bitach) określa, ile różnych kolorów może wyświetlić każdy piksel. 24 bity = 16,7 miliona kolorów (standardowy "True Color"). 30 bitów = 1,07 miliarda kolorów ("Deep Color", na profesjonalnych monitorach). Większość nowoczesnych monitorów ma 24 lub 30 bitów.

Jak sprawdzić rozdzielczość ekranu w ustawieniach systemu

  • Windows 11: Kliknij prawym przyciskiem myszy pulpit → Ustawienia wyświetlania → "Rozdzielczość ekranu"
  • macOS: Menu Apple → Ustawienia systemowe → Monitory
  • Ubuntu/Linux: Ustawienia → Monitory
  • Lub po prostu spójrz na górę tej strony — żadne menu ustawień nie jest potrzebne.

Najczęściej zadawane pytania

Twoja rozdzielczość ekranu jest widoczna w karcie "Rozdzielczość ekranu" na górze tej strony. Została wykryta automatycznie przez przeglądarkę za pomocą API window.screen. Jeśli masz ekran Retina/HiDPI, wiersz "Piksele fizyczne" pokazuje rzeczywistą liczbę pikseli sprzętowych (rozdzielczość ekranu × DPR).
DPR to liczba pikseli fizycznych przypadających na logiczny piksel CSS. DPR 1 = standardowy wyświetlacz. DPR 2 = Retina (ekran ma 4× więcej pikseli niż wyświetlacz 1× przy tym samym rozmiarze CSS). DPR 3 = wiele telefonów z Androidem. Wyższe DPR oznacza ostrzejszy tekst i obrazy, ale obrazy muszą być serwowane w wyższych rozdzielczościach, aby z tego skorzystać.
Rozdzielczość ekranu to całkowita liczba pikseli sprzętu monitora (stała). Rozmiar viewportu to obszar okna przeglądarki wyświetlający treści webowe — zmienia się przy zmianie rozmiaru przeglądarki, powiększaniu/pomniejszaniu, otwieraniu/zamykaniu DevTools lub przełączaniu paska adresu. Zapytania mediów CSS reagują na rozmiar viewportu, nie na rozdzielczość ekranu. Viewport pokazany tutaj aktualizuje się na żywo przy zmianie rozmiaru.
Kliknij prawym przyciskiem myszy na pulpicie → Ustawienia wyświetlania → przewiń do "Rozdzielczość ekranu". Możesz też nacisnąć Win+I, aby otworzyć Ustawienia, a następnie przejść do System → Ekran. Możesz też po prostu sprawdzić górę tej strony — rozdzielczość jest pokazana natychmiast bez nawigacji.
Menu Apple (lewy górny róg) → Ustawienia systemowe → Monitory. Pod nazwą monitora zobaczysz rozdzielczość. Na starszym macOS: Preferencje systemowe → Monitory. Uwaga: na Makach Retina macOS może pokazywać "skalowaną" rozdzielczość (np. "Wygląda jak 2560×1600") — to jest rozdzielczość logiczna. Fizyczna rozdzielczość sprzętu jest 2× wyższa.