Snaplytics JS Tests

Test Rozdzielczości Ekranu

Zobacz natywną rozdzielczość swojego ekranu w pikselach fizycznych wraz z proporcją pikseli, proporcjami ekranu i głębią kolorów. Następnie uruchom wzorzec testowy 1 piksel na pełnym ekranie: przy prawdziwej rozdzielczości natywnej odczytuje się go jako czystą, równą teksturę, podczas gdy skalowanie lub tryb nienatywny objawia się rozmyciem lub moiré.

Rozdzielczość natywna

Wykrywanie…

Na żywo
Widok CSS
Proporcja pikseli
Proporcje ekranu
Głębia kolorów
Wzorzec testowy

zmień wzorzec

Jak odczytywać wzorzec
Ostra, równa tekstura

Naprzemienne piksele zlewają się w gładką szarość — ekran działa w rozdzielczości natywnej i przy skalowaniu 100%.

Miękki lub rozmyty

Obraz jest rozciągany — rozdzielczość jest prawdopodobnie ustawiona poniżej natywnej, więc GPU skaluje w górę.

Moiré lub banding

Faliste wzorce pochodzą z interpolacji. Zresetuj zoom przeglądarki do 100% i sprawdź skalowanie ekranu systemu operacyjnego.

Rozdzielczość ekranu to liczba pikseli wyświetlanych przez monitor, zapisana jako szerokość × wysokość — na przykład 1920 × 1080. Więcej pikseli na tej samej powierzchni oznacza ostrzejszy, gęstszy obraz. Każdy płaski panel ma jedną stałą siatkę fizycznych pikseli, dla której jest zbudowany — nazywa się to rozdzielczością natywną — i wygląda najostrzej właśnie przy tej rozdzielczości. Ten test odczytuje fizyczną siatkę pikseli zgłaszaną przez przeglądarkę i wyświetla ją jako dużą liczbę powyżej, dzięki czemu możesz potwierdzić, co faktycznie obsługuje Twój sprzęt.

Wybierz niższą rozdzielczość, a karta graficzna rozciągnie mniejszy obraz na stałą siatkę, przez co wszystko straci ostrość. Nowoczesne systemy stosują też skalowanie wyświetlacza (Retina, Windows 150%), aby interfejs był większy, przy jednoczesnym renderowaniu z pełną gęstością. Dlatego przeglądarka podaje dwa rozmiary: obszar roboczy CSS w pikselach logicznych oraz rozdzielczość fizyczną w prawdziwych pikselach urządzenia. Stosunek między nimi to współczynnik pikseli urządzenia (DPR) — DPR równy 2 oznacza, że każdy piksel CSS jest reprezentowany przez blok 2 × 2 fizycznych pikseli, przez co obszar roboczy widoczny dla przeglądarki może mieć połowę rozdzielczości ekranu.

Najczęstsze rozdzielczości ekranu

RozdzielczośćNazwaGdzie jest używana
1280 × 720HD / 720pStarsze laptopy, monitory klasy podstawowej
1920 × 1080Full HD / 1080pNajpopularniejsza rozdzielczość na komputerach stacjonarnych i laptopach
2560 × 1440QHD / 1440pOstrzejsze monitory do gier i pracy
3440 × 1440UltraWide QHDPanele ultrawide 21:9
3840 × 21604K UHDDuże ekrany o wysokim DPI, telewizory
1170 × 2532iPhone (DPR 3)Nowoczesne telefony — wysokie panele o wysokiej gęstości

Wskazówki dotyczące dokładnego odczytu

  • Zresetuj powiększenie przeglądarki do 100% — zoom przetwarza stronę niezależnie od systemu operacyjnego.
  • W systemie Windows wybierz rozdzielczość oznaczoną „(Recommended)” w Settings > System > Display.
  • W systemie macOS wybierz opcję „Default for display” w System Settings > Displays.
  • Uruchom pełnoekranowy wzorzec: równomierny, czysty szary oznacza wyjście natywne, natomiast rozmycie lub mora oznaczają skalowanie.