WAVESPEED AI TESTER RESPONSYWNOŚCI Twój kod pozostaje na urządzeniu

100% DARMOWE

Darmowy tester responsywności stronZobacz stronę we wszystkich rozmiarach ekranu naraz.

Wpisz adres witryny lub wklej HTML i zobacz ją w ramkach o rozmiarze prawdziwych ekranów telefonów, tabletów, laptopów i komputerów — obok siebie lub pojedynczo.
Przeciągnij ramkę do dowolnej szerokości, obróć ją, przeskakuj między popularnymi breakpointami, wykrywaj treści wychodzące w bok i zapisuj zrzuty swojego HTML.

Ponad 40 rozmiarów ekranuWidok obok siebieWykrywanie przepełnienia

Bez rejestracji Bez proxy Bez znaku wodnego

Ładowanie testera…

Wklejony HTML pozostaje w przeglądarce. Witryny ładują się bezpośrednio z własnych serwerów.

TRZY PROSTE KROKI

Jak przetestować responsywność strony

Dodaj stronę

Wpisz adres witryny albo przełącz na HTML i wklej kod lub otwórz plik .html. Przykładowa strona pokazuje, jak to działa.

Wybierz ekrany

Oglądaj jedno urządzenie i przeciągaj jego krawędzie albo ustaw obok siebie telefon, tablet, laptop i komputer. Obróć dowolne z nich.

Popraw i zapisz

Przeczytaj ostrzeżenia o treściach szerszych niż ekran, edytuj HTML i patrz, jak aktualizuje się każda ramka, a potem zapisz zrzuty.

Wskazówki dla układów, które działają w każdym rozmiarze

Zacznij od 320 pikseli

Najwęższe używane telefony mają 320–360 pikseli CSS szerokości. Jeśli układ wytrzyma tam, wytrzyma prawie wszędzie.

Przeciągaj, nie tylko wybieraj urządzenia

Breakpointy psują się też między urządzeniami. Powoli przeciągaj ramkę od wąskiej do szerokiej i wypatruj momentu, gdy coś przeskakuje lub nachodzi na siebie.

Nie zapominaj o tagu viewport

Bez <meta name="viewport" content="width=device-width, initial-scale=1"> telefony układają stronę na szerokość około 980 pikseli i pomniejszają ją, aż tekst staje się maleńki.

WaveSpeed AI

Od układu do grafiki

Gdy strona działa w każdym rozmiarze, stwórz potrzebne jej obrazy i klipy z WaveSpeed AI.

Zacznij tworzyć Odkryj ponad 1000 modeli AI

Ponad 1000 modeli AI
Obraz, wideo i 3D
Płać za użycie

$1 w darmowych kredytach dla kwalifikujących się nowych kont. Bez karty. Generatory mają osobne wymagania dotyczące konta i kredytów. Tester responsywności jest darmowy.

Tester responsywności – FAQ

Czy ten tester responsywności jest darmowy?

Tak. Bez konta, bez limitów urządzeń i stron, bez znaku wodnego na zrzutach i bez instalacji: działa w przeglądarce.

Jak przetestować stronę na różnych rozmiarach ekranu?

Wpisz adres witryny lub wklej HTML, a potem wybierz spośród ponad 40 rozmiarów telefonów, tabletów, laptopów i komputerów, pojedynczo lub obok siebie. Przeciągnij ramkę do dowolnej szerokości, obróć ją lub przeskocz do popularnych breakpointów.

Jak dokładne są rozmiary urządzeń?

Każda ramka to viewport przeglądarki o dokładnej szerokości i wysokości danego ekranu w pikselach CSS, więc media queries, układy i breakpointy reagują tak samo jak na tym urządzeniu.

Czy mogę przetestować własny HTML lub lokalną stronę?

Tak. Wklej HTML lub otwórz plik .html, aby podejrzeć go w każdym rozmiarze i edytować na żywo. Witryny ładują się przez https; dla lokalnego serwera deweloperskiego użyj tunelu https lub wklej zbudowany HTML.

Czy wykrywa problemy z układem?

Tak. W Twoim HTML oznacza elementy szersze niż ekran — typową przyczynę przewijania w bok na telefonach — i ostrzega, gdy brakuje metatagu viewport.

Czy mogę zapisywać zrzuty ekranu?

Tak, dla wklejonego HTML: zapisz widoczny obszar lub całą stronę jako PNG w gęstości pikseli urządzenia, więc ramka o szerokości 393 pikseli przy 3x daje obraz o szerokości 1179 pikseli.

Co oznacza etykieta gęstości pikseli?

Telefony mieszczą od dwóch do czterech fizycznych pikseli w każdym pikselu CSS. Etykieta pokazuje ten współczynnik, a zrzuty wklejonego HTML są w nim zapisywane, więc ich ostrość odpowiada prawdziwemu ekranowi.

Czy moja strona przechodzi przez wasze serwery?

Nie. Witryna jest ładowana w ramkach przez Twoją przeglądarkę bezpośrednio z jej własnego serwera, bez proxy pośrodku. Wklejony HTML i zrzuty pozostają w przeglądarce; ostatnia strona i ustawienia są przechowywane w pamięci tej przeglądarki.

Dlaczego witryna pozostaje pusta?

Niektóre witryny nie pozwalają na wyświetlanie wewnątrz innych stron. Otwórz „Dlaczego jest pusto?”, aby sprawdzić nagłówki witryny, albo wklej HTML strony.

Wszystkie darmowe narzędzia