Tester rozmiaru viewportu i responsywnych punktów przełamania
Sprawdź, jak duże jest naprawdę okno przeglądarki z perspektywy strony internetowej. To narzędzie odczytuje szerokość i wysokość viewportu w pikselach CSS, stosunek pikseli urządzenia oraz orientację, a także pokazuje, w który responsywny punkt przełamania mieści się bieżący rozmiar — wszystko na żywo. Zmień rozmiar okna, a każda wartość zaktualizuje się natychmiast.
Zmień rozmiar okna przeglądarki i obserwuj aktualizację tych wartości na żywo.
Punkty przełamania Tailwind CSS
Zakres, w który mieści się Twój viewport, jest podświetlany podczas zmiany rozmiaru.
| Prefiks | Min. szerokość | Obowiązuje od |
|---|---|---|
| base | 0px | 0 – 639px |
| sm | 640px | 640 – 767px |
| md | 768px | 768 – 1023px |
| lg | 1024px | 1024 – 1279px |
| xl | 1280px | 1280 – 1535px |
| 2xl | 1536px | 1536px+ |
Kategorie urządzeń
Panel testowy o zmiennym rozmiarze
Przeciągnij dolny prawy róg, aby zmienić rozmiar tego panelu. Panel zgłasza swój własny rozmiar oraz punkt przełamania, w który trafiłaby ta szerokość — szybki wskaźnik responsywności.
Typowe rozmiary viewportu urządzeń
Przybliżone pionowe viewporty w pikselach CSS podane orientacyjnie — rzeczywiste wartości różnią się w zależności od przeglądarki i systemu operacyjnego.
| Urządzenie | Viewport (px CSS) | DPR |
|---|---|---|
| iPhone SE | 375 × 667 | 2× |
| iPhone 15 / 14 Pro | 393 × 852 | 3× |
| Pixel 8 | 412 × 915 | 2.6× |
| iPad mini | 768 × 1024 | 2× |
| iPad Pro 11" | 834 × 1194 | 2× |
| Surface Pro | 912 × 1368 | 2× |
| Laptop (720p) | 1280 × 720 | 1× |
| Laptop (1080p) | 1366 × 768 | 1× |
| Desktop (1080p) | 1920 × 1080 | 1× |
Powiązane narzędzia
Czym jest viewport
Viewport to widoczny obszar, w którym strona internetowa może się wyświetlać — obszar treści okna przeglądarki, nieuwzględniający kart, paska adresu ani paska zakładek. Dlatego prawie zawsze jest mniejszy niż rozdzielczość ekranu: ekran to cały panel, a viewport to tylko wycinek, który strona może wykorzystać. window.innerWidth i window.innerHeight zwracają ten obszar w pikselach CSS, a documentElement.clientWidth/clientHeight zwracają viewport układu (ten sam obszar pomniejszony o szerokość klasycznego paska przewijania, jeśli jest widoczny). Ponieważ viewport zmienia się natychmiast po zmianie rozmiaru okna, podziale ekranu lub obróceniu urządzenia, to właśnie na tę wartość reagują responsywne układy stron.
Piksele CSS a piksele urządzenia i devicePixelRatio
Piksel CSS to jednostka układu, a nie fizyczna kropka na panelu. Na standardowym wyświetlaczu jeden piksel CSS odpowiada jednemu pikselowi fizycznemu, ale ekrany o wysokiej gęstości 'Retina' pakują dwa lub trzy fizyczne piksele w każdy piksel CSS, dzięki czemu tekst wygląda ostrzej. window.devicePixelRatio informuje o tym mnożniku: wartość 2 oznacza, że viewport o szerokości 1440 pikseli CSS jest rysowany za pomocą 2880 pikseli fizycznych. Strony internetowe są układane w pikselach CSS, więc telefon zgłaszający viewport o szerokości 390 pikseli przy DPR równym 3 ma fizyczny panel o szerokości ok. 1170 pikseli. Aby zobaczyć pełną fizyczną rozdzielczość i gęstość pikseli ekranu, skorzystaj z narzędzi What Is My Screen Size oraz Screen Resolution Test.
Responsywne punkty przełamania
Punkt przełamania to szerokość viewportu, przy której zmienia się układ strony — kolumny się układają w stos, menu się zwija, zmienia się rozmiar tekstu. Zapytania mediów CSS oraz frameworki narzędziowe, takie jak Tailwind CSS, definiują niewielki zestaw nazwanych szerokości i stosują style od tej szerokości w górę. Domyślne wartości Tailwind to sm przy 640px, md przy 768px, lg przy 1024px, xl przy 1280px i 2xl przy 1536px; poniżej 640px znajdujesz się w nieoznaczonym zakresie base. Poniższe zestawienie podświetla aktywny zakres podczas zmiany rozmiaru okna, a przeciągalny panel testowy pokazuje, w jaki punkt przełamania trafiłaby jego własna szerokość — szybki sposób na sprawdzenie, jak komponent zachowuje się przy różnych rozmiarach bez zmiany całego okna.
Dlaczego innerWidth różni się od szerokości ekranu
Między rozdzielczością panelu a viewportem widzianym przez stronę znajduje się kilka czynników. Elementy interfejsu przeglądarki (karty, paski narzędzi i widoczny pasek przewijania) zmniejszają dostępny obszar. Powiększenie strony również to zmienia: przybliżenie zmniejsza liczbę pikseli CSS, które się mieszczą, więc innerWidth spada, mimo że okno się nie poruszyło, a dodatkowo wpływa na devicePixelRatio. Na urządzeniach mobilnych znacznik meta viewport — <meta name="viewport" content="width=device-width, initial-scale=1"> — nakazuje przeglądarce ustawić viewport układu na szerokość urządzenia, zamiast udawać komputer stacjonarny o szerokości ok. 980px, dlatego responsywne strony go potrzebują. Skalowanie wyświetlacza w systemie operacyjnym również zmienia liczbę pikseli CSS, dlatego dwa identyczne monitory mogą zgłaszać różne rozmiary viewportu.