Utilia
Kategorie ▾
Język: pl ▾

Sprawdzanie rozdzielczości ekranu

Sprawdź od razu rozdzielczość ekranu, rozmiar viewportu, device pixel ratio, piksele fizyczne, głębię kolorów i orientację – z aktualizacją na żywo.

Rozdzielczość ekranu (piksele CSS)
–
Piksele fizyczne (szacunek)
–
Device pixel ratio (gęstość pikseli)
–
Viewport (obszar strony)
–
Dostępny obszar ekranu
–
Okno przeglądarki
–
Proporcje obrazu
–
Orientacja
–
Głębia kolorów
–
Gamut kolorów
–
Ekran HDR
–
Powiększenie gestem
–

Wartości aktualizują się na żywo, gdy zmieniasz rozmiar okna, obracasz urządzenie, powiększasz lub przenosisz okno na inny monitor.

Piksele fizyczne są szacowane jako rozmiar ekranu × device pixel ratio. Aby wynik był dokładny, przywróć powiększenie przeglądarki do 100% (Ctrl+0 lub Cmd+0).

Jak korzystać z tego narzędzia

  1. Otwórz stronę: wszystkie wartości pojawiają się od razu, odczytane z twojej przeglądarki.
  2. Zmień rozmiar okna, obróć telefon lub tablet albo przeciągnij okno na inny monitor. Wartości aktualizują się na żywo.
  3. Kliknij Kopiuj jako tekst, aby skopiować wszystkie wartości jako listę w zwykłym tekście – przydaje się w raporcie błędu lub zgłoszeniu do pomocy technicznej.

Co oznacza każda wartość

Rozdzielczość ekranu (piksele CSS) to rozmiar całego ekranu w takiej postaci, w jakiej widzą go strony internetowe. Na zwykłym monitorze przy skalowaniu 100% odpowiada rzeczywistej rozdzielczości monitora. Na ekranach o dużej gęstości pikseli jest mniejsza: laptop z matrycą 2880 × 1800 przy skalowaniu 200% zgłasza 1440 × 900.

Piksele fizyczne (szacunek) to rozdzielczość ekranu pomnożona przez device pixel ratio. Zwykle jest to natywna rozdzielczość matrycy, a narzędzie podaje nazwy popularnych rozdzielczości, takich jak Full HD (1080p), QHD (1440p) czy 4K UHD.

Device pixel ratio (gęstość pikseli) mówi, ile pikseli fizycznych składa się na jeden piksel CSS. Wartość 1 to klasyczny monitor, 1,25 lub 1,5 jest typowe dla laptopów z Windowsem ze skalowaniem ekranu, 2 dla Maców z ekranem Retina, a 3 dla wielu telefonów. Zmienia ją też powiększenie w przeglądarce.

Viewport (obszar strony) to część okna, w której rysowana jest strona, bez pasków narzędzi i kart. To właśnie ten rozmiar biorą pod uwagę projektanci stron przy układach responsywnych i media queries.

Dostępny obszar ekranu to ekran pomniejszony o stałe elementy systemu, takie jak pasek zadań Windowsa albo pasek menu i Dock w macOS. Okno przeglądarki to zewnętrzny rozmiar okna, łącznie z ramką i paskami narzędzi.

Proporcje obrazu opisują kształt ekranu, np. 16:9, 16:10 albo 21:9 w monitorach ultrapanoramicznych. Orientacja mówi, czy ekran jest ustawiony poziomo czy pionowo, wraz z kątem obrotu, jeśli przeglądarka go podaje.

Głębia kolorów to liczba bitów na piksel: 24 bity oznaczają 8 bitów na kanał, a 30 bitów – 10 bitów na kanał. Gamut kolorów pokazuje najszerszą przestrzeń barw, jaką według przeglądarki obejmuje ekran: sRGB, Display P3 lub Rec. 2020. Ekran HDR mówi, czy przeglądarka zgłasza ekran o wysokim zakresie dynamiki. Powiększenie gestem pokazuje poziom powiększenia, gdy na ekranie dotykowym rozsuwasz palce.

Dlaczego liczby mogą zaskakiwać

Strony internetowe nigdy nie widzą sprzętu bezpośrednio. Systemy operacyjne skalują wszystko, aby tekst pozostał czytelny na gęstych ekranach, więc monitor 4K przy skalowaniu 150% wygląda dla przeglądarki jak ekran 2560 × 1440. Wiersz Piksele fizyczne (szacunek) odwraca to obliczenie. Jest dokładny przy powiększeniu przeglądarki 100%, ale przeglądarki różnie obsługują powiększenie, więc zanim mu zaufasz, zresetuj je skrótem Ctrl+0 lub Cmd+0. Na telefonach wynik może się różnić o kilka pikseli od deklarowanej rozdzielczości z powodu zaokrągleń.

Jeśli korzystasz z kilku monitorów, wartości dotyczą tego, na którym znajduje się aktualnie okno przeglądarki.

Najczęściej zadawane pytania

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

Rozdzielczość ekranu to rozmiar całego wyświetlacza. Viewport to tylko obszar wewnątrz okna przeglądarki, w którym wyświetla się strona, więc zmienia się wraz z rozmiarem okna.

Dlaczego moja rozdzielczość jest mniejsza niż w specyfikacji monitora?

Prawdopodobnie masz włączone skalowanie ekranu. Pomnóż wynik przez Device pixel ratio (gęstość pikseli), aby uzyskać rozdzielczość fizyczną – to właśnie pokazuje wiersz Piksele fizyczne (szacunek).

Dlaczego device pixel ratio zmienia się przy powiększaniu?

Powiększenie w przeglądarce sprawia, że każdy piksel CSS jest większy, więc mieści się w nim więcej pikseli fizycznych. Przywróć powiększenie do 100%, aby zobaczyć wartość ustawioną przez system operacyjny.

Czy to narzędzie wykryje monitor 10-bitowy lub HDR?

Pokazuje to, co zgłasza przeglądarka. Wiele przeglądarek podaje 24-bitowy kolor nawet na matrycach 10-bitowych, a HDR jest wykrywany tylko wtedy, gdy jest włączony w systemie operacyjnym.

Czy moje informacje są gdzieś wysyłane?

Nie. Wszystko odczytuje twoja przeglądarka na tej stronie i nic nie jest wysyłane ani zapisywane.

Podobne narzędzia