Widok responsywny pokazuje bieżącą stronę wyrenderowaną w wielu rozmiarach viewportu urządzeń obok siebie — wszystko na jednym ekranie. Zobacz, jak twój projekt wygląda na iPhone, iPad, telefonach Android, laptopach i komputerach stacjonarnych jednocześnie. Przewiń jeden viewport, a wszystkie inne podążają, ułatwiając porównanie tej samej sekcji zawartości na każdym rozmiarze urządzenia.
Tradycyjnie testowanie projektów responsywnych oznacza zmianę rozmiaru okna przeglądarki lub użycie paska urządzeń DevTools do przełączania między rozmiarami viewportu pojedynczo. Działa, ale możesz widzieć tylko jeden rozmiar naraz — co uniemożliwia porównanie, jak sekcja wygląda na urządzeniu mobilnym vs desktopowym jednocześnie. Widok responsywny rozwiązuje to, renderując stronę w wielu viewportach naraz, wyświetlanych obok siebie na ekranie. Wybieraj z presetów urządzeń (iPhone 15, iPad Pro, Pixel 8, MacBook, desktop 1440p) lub wprowadź niestandardowe wymiary. Każdy viewport to w pełni wyrenderowana instancja strony, a nie statyczny zrzut ekranu — przewiń jeden, a wszystkie inne przewijają się do tej samej pozycji. To synchronizowane przewijanie pozwala porównać dokładnie ten sam obszar zawartości na wszystkich rozmiarach urządzeń jednym spojrzeniem. To najszybszy sposób wykrycia problemów responsywności: nawigacja, która nieprawidłowo się zawija, obrazy wystające poza kontenery, tekst stający się nieczytelny na małych ekranach lub odstępy, które się niezręcznie zwijają.
Zobacz bieżącą stronę wyrenderowaną jednocześnie w wielu rozmiarach viewportu wyświetlanych obok siebie na twoim ekranie. Porównaj układy mobilne, tabletowe i desktopowe jednym spojrzeniem, bez przełączania między widokami. Każdy viewport to w pełni funkcjonalny render strony.
Wybieraj z biblioteki popularnych presetów urządzeń: iPhone 15 (393×852), iPhone SE (375×667), iPad (820×1180), iPad Pro (1024×1366), Pixel 8 (412×915), MacBook Pro (1440×900) i Desktop Full HD (1920×1080). Presety są aktualizowane o bieżące wymiary urządzeń.
Wprowadź dowolną niestandardową szerokość i wysokość, aby testować niestandardowe rozmiary viewportu. Musisz sprawdzić, jak strona wygląda dokładnie przy 768px szerokości (powszechny punkt przerwania tabletu)? Po prostu go wpisz. Wiele niestandardowych viewportów można dodać obok presetów.
Przewiń jeden viewport, a wszystkie inne przewijają się do tej samej pozycji pionowej. Pozwala to porównać dokładnie tę samą sekcję zawartości na wszystkich rozmiarach urządzeń jednocześnie — zobacz, jak obszar hero, tabela cen lub stopka renderują się na urządzeniach mobilnych, tabletach i desktopach.
Każdy viewport jest wyświetlany wewnątrz realistycznej ramki urządzenia — ramek telefonu, obramowań tabletu, chromu laptopa. Kontekst wizualny pomaga interesariuszom zrozumieć, który viewport reprezentuje które urządzenie podczas przeglądów i prezentacji.
Przełączaj poszczególne urządzenia włączone i wyłączone, aby skupić się na konkretnych porównaniach rozmiarów. Porównujesz tylko mobilne i desktopowe? Odznacz presety tabletu. Chcesz zobaczyć tylko iPhone'y? Odznacz wszystko inne. Pełna kontrola nad tym, które viewporty są widoczne.
Po wdrożeniu projektu responsywnego użyj Widoku responsywnego, aby zweryfikować, że każda sekcja wygląda poprawnie na wszystkich docelowych rozmiarach urządzeń. Wychwyć przepełnienie tekstu, problemy ze skalowaniem obrazu, problemy zwijania nawigacji i niespójności odstępów — wszystko w jednym widoku.
Pokaż klientom, jak ich strona wygląda na różnych urządzeniach podczas spotkania przeglądowego. Widok obok siebie jest natychmiast intuicyjny — nie ma potrzeby wyjaśniania koncepcji viewportów. Klienci mogą widzieć mobilny, tabletowy i desktopowy jednocześnie.
Widzisz, że układ psuje się przy konkretnej szerokości? Dodaj niestandardowy viewport przy dokładnej szerokości pikselowej, gdzie występuje problem, i porównaj go z nieco szerszymi i węższymi viewportami, aby zidentyfikować, który punkt przerwania CSS powoduje problem.
Sprawdź, czy długie nagłówki poprawnie się zawijają na urządzeniach mobilnych, czy tabele danych stają się przewijane na małych ekranach, czy pola formularzy są wystarczająco duże do tapnięcia i czy CTA pozostają widoczne i dostępne na wszystkich rozmiarach urządzeń.
Użyj widoku wielu urządzeń, aby tworzyć przekonujące obrazy prezentujące projekt responsywny. Zrób zrzut ekranu Widoku responsywnego pokazującego twój projekt na 3-4 rozmiarach urządzeń do prezentacji portfolio.
Otwórz pływający dok DevSuite Pro i kliknij ikonę Widoku responsywnego. Strona przechodzi do trybu wielu viewportów z ramkami urządzeń wyświetlanymi obok siebie.
Pasek urządzeń na górze pokazuje dostępne presety (iPhone, iPad, Pixel, MacBook, Desktop). Kliknij urządzenia, aby je włączyć/wyłączyć. Wybrane urządzenia pojawiają się jako viewporty poniżej.
Kliknij przycisk "Niestandardowe" i wprowadź konkretne wymiary szerokość × wysokość, aby dodać niestandardowy viewport. Przydatne do testowania dokładnych wartości punktów przerwania, takich jak 768px, 1024px lub 1280px.
Przewiń dowolny viewport — wszystkie inne podążają do tej samej pozycji. Porównaj, jak ta sama sekcja wygląda na wszystkich wybranych rozmiarach urządzeń jednocześnie.
Kliknij ponownie ikonę Widoku responsywnego lub przycisk zamknięcia, aby wyjść z trybu wielu viewportów i powrócić do normalnego widoku pojedynczej strony.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 39 narzędzi programistycznych dla swojej przeglądarki.
