Urządzenia mobilne stanowią już ogromną część, jeśli nie większość, czytelników online dla wielu witryn, więc upewnienie się, że witryna będzie wyglądać i działać poprawnie na iPhonie lub tablecie, jest niezwykle ważne. Istnieje wiele usług, które oferują podgląd układów mobilnych dla danego adresu URL, ale Apple znacznie ułatwiło testowanie witryn pod kątem gotowości mobilnej dzięki Safari 9 w OS X El Capitan. Nowa funkcja o nazwie Responsive Design Mode pozwala szybko wyświetlić podgląd strony internetowej na różnych urządzeniach Apple, a także typowe rozdzielczości ekranu telefonu komórkowego. Oto jak to działa.
Ważne jest, aby powtórzyć, że tryb responsywnego projektowania to nowa funkcja dostępna wyłącznie w Safari 9 w systemie OS X El Capitan, więc aby uzyskać do niej dostęp, musisz uruchomić przynajmniej te wersje przeglądarki i systemu operacyjnego. Jeśli komputer Mac spełnia ten wymóg, musisz najpierw włączyć tryb programisty Safari. Aby to zrobić, uruchom Safari i kliknij Safari na pasku menu. Następnie wybierz Preferencje> Zaawansowane .
Na karcie Zaawansowane w oknie Preferencji Safari zaznacz pole „Pokaż menu rozwijania na pasku menu”. Jak sama nazwa wskazuje, zobaczysz nowe menu „Opracuj” na pasku menu Safari po prawej stronie „Zakładki”.
Następnie zamknij okno Preferencje Safari i przejdź do strony, którą chcesz przetestować w trybie responsywnego projektowania. Gdy witryna zostanie w pełni załadowana w przeglądarce, użyj skrótu klawiaturowego Command-Opcja-R, a zobaczysz okno przeglądarki przekształcone w podgląd jednej z kilku rozdzielczości urządzeń mobilnych (możesz również uzyskać dostęp do trybu projektowania responsywnego, klikając przycisk Rozwiń w pasek menu Safari i wybranie Enter Responsive Design Mode ).
Safari Responsive Design Mode pozwala wyświetlić podgląd strony internetowej we wszystkich rozdzielczościach urządzeń mobilnych Apple, od 3, 5-calowego iPhone'a 4S po 12, 9-calowego iPada Pro. Użytkownicy mają również możliwość wyboru rozdzielczości 1x, 2x lub 3x „Retina” i zmiany agenta przeglądarki, aby naśladować zachowanie większości popularnych przeglądarek, takich jak Chrome, Firefox i Edge.
Dla każdego urządzenia i rozmiaru ekranu użytkownicy mogą kliknąć ikonę urządzenia, aby zmienić orientację pionową lub poziomą lub, w przypadku urządzeń takich jak iPad Air i iPad Pro, które obsługują widok podzielony, można kliknąć, aby obracać między różnymi układami widoku podzielonego.
Podczas gdy Safari Responsive Design Mode nie ma niektórych opcji podobnych istniejących narzędzi, wbudowanie go bezpośrednio w Safari może być ogromną oszczędnością czasu dla projektantów stron internetowych oraz doskonałym narzędziem do nauki i testowania dla właścicieli witryn internetowych, którzy chcą mieć pewność, że ich użytkownicy mobilni uzyskują najlepszą jakość niezależnie od rozdzielczości ekranu i rozmiaru.
Po zakończeniu testowania możesz wyjść z trybu projektowania responsywnego, zamykając okno przeglądarki lub kartę lub ponownie naciskając skrót Command-Opcja-R .
