Jaka jest rozdzielczość mojego ekranu? Viewport, DPR i breakpointy | We.Inc
Sprawdź na żywo rozdzielczość ekranu, rozmiar viewportu przeglądarki i device pixel ratio, a także aktywny breakpoint Tailwind i Bootstrap oraz tabelę rozmiarów popularnych urządzeń.
Rozdzielczość Twojego ekranu widać w pierwszym polu na tej stronie, zmierzoną przez przeglądarkę podczas ładowania. Jest podawana w pikselach CSS; pomnóż ją przez device pixel ratio, aby otrzymać piksele fizyczne. Strona pokazuje też viewport przeglądarki, czyli rozmiar, jaki faktycznie dostaje Twoja strona, i aktualizuje go na żywo, gdy zmieniasz rozmiar okna.
Co oznacza każda liczba
Pomiar
Co to jest
Ekran
Cały wyświetlacz, w pikselach CSS
Viewport
Widoczny obszar strony wewnątrz okna przeglądarki
Device pixel ratio
Liczba pikseli fizycznych na piksel CSS (2 lub 3 w większości telefonów)
Rozdzielczość fizyczna
Rozmiar ekranu pomnożony przez współczynnik pikseli
Rozmiar ekranu, rozmiar viewportu, device pixel ratio, orientacja i głębia kolorów, odczytywane na żywo z Twojej przeglądarki. Narzędzie pokazuje też, w którym breakpoincie Tailwind i Bootstrap mieści się bieżące okno, z media queries do skopiowania i tabelą rozmiarów popularnych urządzeń.
Otwórz stronę. Liczby pochodzą z obiektów screen i window Twojej przeglądarki, więc nic nie jest instalowane ani nigdzie wysyłane.
Zmień rozmiar okna lub obróć telefon. Viewport, breakpoint i orientacja aktualizują się od razu.
Sprawdź panel breakpointów, aby zobaczyć, które breakpointy Tailwind i Bootstrap obowiązują przy bieżącej szerokości.
Skopiuj media query dla dowolnego breakpointu albo porównaj swoje liczby z tabelą urządzeń poniżej.
Projektuj pod szerokości viewportu, a nie rozdzielczości ekranu. Ekran o szerokości 1920 pikseli może pokazywać okno przeglądarki o szerokości 1200 pikseli i tylko tyle dostaje Twój układ.
Testuj przy szerokości 360 i 390 pikseli. Wiele telefonów z Androidem zgłasza od 360 do 412 pikseli CSS, a nowe iPhone'y od 375 do 440, więc układ działający przy 360 obsługuje większość telefonów.
Dostarczaj obrazy dwa razy większe niż rozmiar wyświetlania albo używaj srcset, aby pozostały ostre na ekranach ze współczynnikiem pikseli 2 lub wyższym.
Powiększenie w przeglądarce zmienia zarówno viewport, jak i współczynnik pikseli. Jeśli liczby wyglądają dziwnie, zresetuj powiększenie przez Ctrl+0 lub Cmd+0 i sprawdź ponownie.
Najczęściej zadawane pytania
Dlaczego rozdzielczość mojego ekranu wygląda na mniejszą niż ta podana przez monitor?
Przeglądarki podają rozmiary w pikselach CSS. Gdy system operacyjny skaluje wyświetlacz, na przykład do 150% na monitorze 4K lub na każdym Macu z ekranem Retina, jeden piksel CSS obejmuje kilka pikseli fizycznych. Pomnóż rozmiar ekranu przez pokazany tutaj device pixel ratio, aby otrzymać rozdzielczość fizyczną.
Czym różni się rozmiar ekranu od rozmiaru viewportu?
Rozmiar ekranu to cały wyświetlacz. Rozmiar viewportu to część okna przeglądarki, która pokazuje stronę, bez paska adresu, kart, pasków narzędzi i zadokowanych paneli. Strony układają się względem viewportu, więc to tej liczby używaj w projektowaniu responsywnym.
Czym jest device pixel ratio?
To liczba pikseli fizycznych używanych do narysowania jednego piksela CSS w każdym kierunku. Współczynnik 1 to standardowy wyświetlacz, 2 jest typowy dla laptopów z ekranami o wysokiej gęstości i tabletów, a 3 dla telefonów. Zmienia się też, gdy powiększasz stronę.
Jakich breakpointów używać w projektowaniu responsywnym?
Zacznij od domyślnych wartości swojego frameworka, które dla Tailwind i Bootstrap znajdziesz na tej stronie, a potem dodawaj breakpoint wszędzie tam, gdzie Twoja treść zaczyna wyglądać na ściśniętą lub rozciągniętą. Breakpointy powinny wynikać z treści, a nie z konkretnych urządzeń.
Czy cokolwiek o moim urządzeniu jest zapisywane?
Nie. Wartości są odczytywane w Twojej przeglądarce i pokazywane na stronie. Nie są wysyłane do nas ani zapisywane.
Piksele CSS i piksele fizyczne
Piksel CSS to jednostka długości, a nie punkt na ekranie. Na telefonie ze współczynnikiem pikseli 3 pudełko 100 na 100 pikseli CSS jest rysowane za pomocą 300 na 300 pikseli fizycznych. Dlatego telefon z panelem o szerokości 1179 pikseli informuje strony, że ma 393 piksele szerokości: przeglądarka pokazuje stronę w wygodnym do czytania rozmiarze i rysuje ją z dodatkowymi szczegółami.
Dla układu liczą się tylko piksele CSS. Dla obrazów liczą się też piksele fizyczne, bo obraz dokładnie tak szeroki jak jego pudełko w pikselach CSS będzie wyglądał nieostro na ekranie ze współczynnikiem 2 lub 3.
Breakpointy w praktyce
Tailwind i Bootstrap działają w podejściu mobile first: style bez prefiksu obowiązują przy każdej szerokości, a każdy breakpoint dodaje reguły od swojej minimalnej szerokości w górę. md w Tailwind oznacza 768 pikseli i więcej, nie tylko tablety.
Panel breakpointów na tej stronie mierzy viewport tak samo jak media queries tych frameworków, więc pokazuje zestaw klas, które byłyby aktywne w tym oknie w tej chwili.
Domyślne breakpointy min-width w Tailwind CSS i Bootstrap 5
Framework
Breakpoint
Obowiązuje od
Tailwind CSS
Tailwind CSS
Tailwind CSS
Tailwind CSS
Tailwind CSS
Bootstrap 5
Bootstrap 5
Bootstrap 5
Bootstrap 5
Bootstrap 5
Rozmiary viewportu popularnych urządzeń w pikselach CSS (pionowo), ze współczynnikiem pikseli i pikselami fizycznymi
Typ
Urządzenie lub ustawienie
Viewport (CSS px)
Współczynnik pikseli
Piksele fizyczne
Telefon
iPhone SE (2. i 3. generacji)
Telefon
iPhone 13 i 14
Telefon
iPhone 15 i 16
Telefon
iPhone 16 Pro
Telefon
iPhone 15 Plus i 16 Plus
Telefon
iPhone 16 Pro Max
Telefon
Samsung Galaxy S24
Telefon
Google Pixel 8
Tablet
iPad mini (6. generacji)
Tablet
iPad (10. generacji)
Tablet
iPad Pro 11 cali (4. generacji)
Tablet
iPad Pro 12,9 cala
Laptop
Laptop HD
Laptop
Full HD przy skalowaniu 125%
Laptop
MacBook Air 13 cali (M2, domyślnie)
Komputer stacjonarny
Monitor Full HD
Komputer stacjonarny
Monitor QHD
Komputer stacjonarny
Monitor 4K przy skalowaniu 150%
Pionowa
Pozioma
Kopiuj media query {name}
Ekran {sw}×{sh} (fizycznie {pw}×{ph}), viewport {vw}×{vh}, device pixel ratio {dpr}
Twój ekran w tej chwili
Rozdzielczość ekranu (CSS px)
Proporcje {ratio}
Rozdzielczość fizyczna
Ekran × device pixel ratio
Viewport przeglądarki
Obszar, w którym układa się Twoja strona
Device pixel ratio
Zmienia się wraz z powiększeniem przeglądarki
Dostępny ekran
Ekran bez paska zadań lub Docka
Orientacja i kolor
{orientation}, {depth} bitów
Wykryto ekran dotykowy
Nie wykryto ekranu dotykowego
Kopiuj te liczby
Odczytywanie ekranu. Wymaga to JavaScriptu.
W którym breakpoincie jesteś
Mierzone na szerokości viewportu{width}. Zmień rozmiar okna, aby zobaczyć zmianę.