Sprawdzanie rozdzielczości ekranu

Twoja rozdzielczość ekranu jest widoczna u góry karty narzędzia powyżej — na przykład 1920 × 1080. To rozmiar ekranu w pikselach CSS, czyli w jednostce logicznej używanej przez przeglądarki do układu strony. Poniżej znajdziesz także szacowaną rozdzielczość fizyczną, która uwzględnia skalowanie ekranu. Jeśli obie liczby się różnią, twój ekran działa z włączonym skalowaniem — co jest normalne i zalecane na panelach o wysokiej rozdzielczości. Aby zobaczyć wartości aktualizowane na żywo, zmień rozmiar okna przeglądarki lub przenieś je na inny monitor.

Nowoczesne ekrany o wysokiej rozdzielczości stosują skalowanie, aby tekst i ikony pozostały wygodnej wielkości. Monitor 4K przy skalowaniu 150% zgłasza 2560 × 1440 pikseli CSS, choć panel fizycznie renderuje 3840 × 2160. Właściwości screen.width i screen.height przeglądarki zawsze używają pikseli CSS, więc zgłaszana rozdzielczość jest rozdzielczością przeskalowaną — logiczną. Pomnóż ją przez współczynnik pikseli urządzenia, a otrzymasz rozdzielczość fizyczną — dokładnie to robi za ciebie szacowanie na tej stronie.

Współczynnik pikseli urządzenia to liczba fizycznych pikseli, których przeglądarka używa do narysowania jednego piksela CSS. DPR równy 1 oznacza, że jeden piksel CSS odpowiada jednemu pikselowi fizycznemu. DPR równy 2 — typowy dla ekranów Retina i nowoczesnych laptopów — oznacza, że każdy piksel CSS jest rysowany blokiem 2 × 2 pikseli fizycznych, dzięki czemu obraz jest ostrzejszy. DPR zmienia się także przy powiększaniu: powiększenie do 125% w przeglądarce zwiększa zgłaszany DPR 1,25 raza — dlatego szacowana rozdzielczość fizyczna jest oznaczona jako przybliżona.

Rozdzielczość ekranu opisuje cały wyświetlacz — pełny monitor lub ekran telefonu. Viewport to widoczna część strony internetowej w oknie przeglądarki: nie obejmuje pasków narzędzi, pasków interfejsu, paneli bocznych ani pasków przewijania. Przy zmaksymalizowanej przeglądarce viewport jest nieco mniejszy od ekranu; w małym, swobodnie ustawionym oknie może być znacznie mniejszy. Twórcy stron używają rozmiaru viewportu (a nie rozdzielczości ekranu) do budowy układów responsywnych — dlatego obie wartości są tu pokazane obok siebie.

Rozdzielczość fizyczną oblicza się, mnożąc rozdzielczość CSS przez współczynnik pikseli urządzenia i zaokrąglając do pełnych pikseli. Dwa czynniki sprawiają, że jest to wartość szacowana: powiększenie przeglądarki zmienia zgłaszany DPR — przy powiększeniu 110% DPR równy 2 jest zgłaszany jako 2,2 — a niektóre przeglądarki stosują własne zaokrąglanie wymiarów ekranu. Oszacowanie jest dokładne, gdy powiększenie przeglądarki wynosi 100%, dlatego zalecamy sprawdzenie wartości po zresetowaniu powiększenia (Ctrl/Cmd + 0), jeśli potrzebujesz precyzyjnego odczytu.

Dostępny obszar to część ekranu, której nie zajmują stałe elementy systemu operacyjnego, takie jak pasek zadań Windows, Dock w macOS czy stałe paski systemowe na urządzeniach mobilnych. Ekran 1920 × 1080 z domyślnym paskiem zadań Windows zgłasza dostępną wysokość 1040 pikseli lub mniejszą. Aplikacje — w tym zmaksymalizowane okna przeglądarki — są rozmieszczane w obszarze dostępnym, więc to często praktyczniejsza liczba, gdy obliczasz, ile miejsca faktycznie otrzymuje zmaksymalizowane okno.

Otwórz tę stronę i odczytaj szacowaną rozdzielczość fizyczną — przy powiększeniu przeglądarki 100% odpowiada ona natywnej rozdzielczości panelu, ponieważ skalowanie nie zmienia liczby pikseli renderowanych przez sprzęt. Możesz to też zweryfikować w systemie operacyjnym: w Windows przejdź do Ustawienia › System › Ekran i spójrz na pozycję Rozdzielczość ekranu (wpis oznaczony jako zalecany to rozdzielczość natywna); w macOS otwórz Ustawienia systemowe › Monitory — opcja „Domyślne dla monitora” zwykle używa rozdzielczości natywnej ze skalowaniem dla ostrości.

Tak. Narzędzie korzysta wyłącznie ze standardowych interfejsów przeglądarki, więc działa w przeglądarkach Android i iOS równie dobrze jak na komputerach. Na urządzeniach mobilnych zgłaszana rozdzielczość ekranu to zwykle logiczna rozdzielczość (CSS) urządzenia — na przykład 393 × 851 na wielu telefonach z Androidem — a szacowana rozdzielczość fizyczna odzwierciedla rzeczywisty panel. Obróć urządzenie, a zobaczysz, jak orientacja, proporcje i oba wymiary zmieniają się w czasie rzeczywistym. Dostępny obszar na urządzeniach mobilnych nie obejmuje systemowego paska stanu i paska nawigacji.

Tak — całkowicie. Nie ma opłat, rejestracji, pobierania ani limitu liczby sprawdzeń. Każdy pomiar odbywa się lokalnie w twojej przeglądarce: strona odczytuje twój ekran, okno i ustawienia wyświetlania, a następnie renderuje je na ekranie. Żadne dane o ekranie, odcisk urządzenia ani statystyki użycia nie są wysyłane na jakikolwiek serwer, a po zamknięciu karty nic nie zostaje zapisane. Po załadowaniu strony możesz ją nawet uruchomić offline.

Karta aktualizuje się na żywo z założenia. Zmiana rozmiaru okna zmienia viewport; powiększenie zmienia współczynnik pikseli urządzenia, a więc i szacowanie fizyczne; obrót telefonu zamienia szerokość i wysokość; przeniesienie okna na drugi monitor powoduje ponowny pomiar ekranu, na którym się znalazło. Jeśli liczby zmieniły się bez twojego udziału, odpowiada za to zdarzenie zewnętrzne — na przykład przejście ekranu w tryb uśpienia, przełączenie wyjść w zadokowanym laptopie albo automatyczna zmiana skalowania przez system na potrzeby dostępności.

Nie ma jednej najlepszej odpowiedzi, ponieważ właściwa rozdzielczość zależy od rozmiaru panelu i odległości widzenia. Praktycznie: 1920 × 1080 pozostaje najpowszechniej używaną rozdzielczością pulpitu, 2560 × 1440 pasuje do monitorów 27-calowych i większych, a 3840 × 2160 jest odpowiednia dla ekranów 32-calowych i większych, gdzie wyższa gęstość pikseli jest naprawdę użyteczna. W laptopie gęstszy panel w połączeniu ze skalowaniem systemowym zwykle daje ostrzejszy tekst niż panel o niskiej rozdzielczości przy 100%.

Rozdzielczość liczy piksele, a rozmiar mierzy fizyczną przekątną panelu w calach. To wartości niezależne: 24-calowy i 32-calowy monitor mogą oba mieć 1920 × 1080, ale mniejszy będzie wyglądał ostrzej, bo ta sama liczba pikseli jest upakowana na mniejszej powierzchni. Tę gęstość wyraża się w pikselach na cal i to ona faktycznie decyduje o ostrości tekstu — dlatego laptopowy panel o wysokiej rozdzielczości często wygląda lepiej niż większy, niskorozdzielczy monitor stacjonarny.