Tester rozmiaru viewportu i responsywnych punktów przełamania

Viewport to obszar, do którego strona musi się rysować — okno przeglądarki bez zakładek, paska adresu i pasków przewijania. Dlatego prawie zawsze jest mniejszy niż rozdzielczość ekranu: ekran to cały panel, a viewport to tylko wycinek, z którego może korzystać strona. Mierzy się go w pikselach CSS, jednostkach układu, a nie fizycznych kropkach — wyświetlacze o wysokiej gęstości "Retina" pakują dwa lub trzy fizyczne piksele w każdym pikselu CSS, dzięki czemu tekst wygląda ostrzej, a window.devicePixelRatio raportuje ten mnożnik.

To narzędzie odczytuje window.innerWidth i window.innerHeight przy każdej zmianie rozmiaru i orientacji, wraz z viewportem layoutu z documentElement.clientWidth/clientHeight, stosunkiem pikseli urządzenia oraz orientacją. Punkt przełamania to szerokość viewportu, przy której układ się zmienia — kolumny się układają, menu się zwija, zmienia się rozmiar tekstu — a frameworki takie jak Tailwind CSS stosują style od zestawu nazwanych szerokości w górę. Poniższe zestawienie podkreśla zakres, w którym mieści się twoja szerokość, a panel testowy do przeciągania pokazuje punkt przełamania, jaki osiągnęłaby jego własna szerokość, dzięki czemu możesz podglądać komponent bez zmiany rozmiaru całego okna. Wszystko działa lokalnie; nic nie jest przesyłane.

Jeśli liczby wyglądają inaczej, kilka rzeczy znajduje się pomiędzy rozdzielczością panelu a viewportem, który widzi strona. Interfejs przeglądarki oraz paski przewijania odejmują od użytecznego obszaru, a powiększenie strony zmniejsza liczbę pikseli CSS — więc innerWidth spada bez przesuwania się okna — podobnie jak skalowanie wyświetlacza systemu operacyjnego, dlatego dwa identyczne monitory mogą zgłaszać różne rozmiary. Na telefonach tag meta viewport, <meta name="viewport" content="width=device-width, initial-scale=1">, układa stronę na szerokości urządzenia zamiast udawać pulpit o szerokości ~980px, więc viewport o szerokości 390 px przy DPR 3 znajduje się na panelu o szerokości około 1170 fizycznych 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.

Typowe responsywne punkty przełamania