Narzędzia Deweloperskie w Przeglądarce: Panel Responsive

0:00Teraz chciałbym ci pokazać w jaki sposób możesz pracować przy mobilnych

0:04stronach internetowych i w tym celu musiałem przełączyć się na stronę eduweb

0:08z tego powodu że przykład w który mieliśmy wcześniej nie jest dostosowany do urządzeń mobilnych

0:13więc na stronie eduweb ci to pokażę no i oczywiście najczęściej można

0:17zrobić tak i najprościej że albo skalujemy całe okno przeglądarki albo tutaj

0:21sobie łapiemy i skalujemy natomiast nie jest to najlepsza metoda

0:25pokażę ci jak możemy inaczej przetestować nasze strony na urządzeniach mobilnych

0:30a w zasadzie jak będą wyglądały na urządzeniach mobilnych klikamy

0:34sobie tutaj taką ikonkę i włącza nam się taki oto panel od

0:39razu jedna bardzo ważna uwaga to nie jest tak że tutaj widzimy jak

0:43strona będzie wyglądać na konkretnym urządzeniu mobilnym bo cały czas renderujemy to wszystko na naszym komputerze

0:47w przeglądarce google chrome to co tutaj się dzieje to

0:51tak naprawdę skalowanie okna oraz kilka dodatkowych rzeczy które

0:55emuluje nam przeglądarka tutaj możemy sobie wybrać presety i możemy wybrać

1:00na przykład iphone 6 7 8 zobaczyć jak ta strona na takim urządzeniu będzie wyglądać

1:04i tak jak wspomniałem to nie znaczy że na iphonie na pewno będzie tak wyglądać to

1:09oznacza że po prostu iphone ma taką wysokość i szerokość oraz tak zwany

1:13pixel ratio które swoją drogą tutaj możemy zmienić add

1:17device pixel ratio tutaj i widzimy że jest o 2.0 dla iphone'a

1:21również w razie czego możemy sobie to tutaj zmienić to jest istotne o tyle że możemy

1:25w css mieć takie media queries które targetują nam odpowiednie

1:29pixel ratio i wtedy jeżeli tutaj będziemy tym zmieniać również zobaczymy to

1:33na stronie tutaj może sobie to zresetuje mamy coś takiego

1:37jak reset to defaults w ten sposób i będę chciał ci jeszcze pokazać że

1:42tutaj możemy zmienić orientację i zobaczyć jak będzie ta strona wyglądała kiedy ktoś

1:46przechyli telefon do trybu landscape a tutaj mamy tryb portret

1:50no i oczywiście tutaj stronę normalnie możemy sobie przewijać zauważ

1:54że zamiast kursora mamy taki oto punkt i dzięki temu również nie działa

1:58nam na przykład hover czyli jak najeżdżam na ten przycisk to nic się nie dzieje bo dokładnie

2:02tak samo byłoby na urządzeniu mobilnym dopiero kiedy kliknę myszą to

2:07dopiero wtedy tak naprawdę zachowuje się to w ten sposób jak byśmy położyli

2:12palec na naszym telefonie czyli mogę klikać śmieszą i przewijać w taki sposób jak robiłbym

2:16to na telefonie oprócz presetów które tutaj mamy ja najczęściej korzystam

2:21z trybu responsive dlaczego otóż dlatego że wtedy możemy sobie dowolnie

2:25skalować to okno jak chcemy a zauważ że nie musimy skalować tego tym oknem

2:29czyli robimy to w ten sposób a co ważne również mogę sobie tutaj wpisać na

2:33przykład 380 i zobaczyć jak ta strona będzie wyglądała dokładnie

2:37na takiej szerokości to co może być bardzo przydatne to również włączenie

2:41sobie albo rulers w ten sposób gdzie widzimy szerokość albo

2:46co ja preferuję włączenie media queries w ten sposób tutaj

2:50będziemy widzieli wszystkie media queries jakie zdefiniowaliśmy w css jak widzisz

2:54na eduwebie jest ich sporo ale dzięki temu możemy sobie tutaj kliknąć

2:58dostosować się dokładnie do takiego media queries na przykład do takiego i

3:02tak dalej więc to również może być bardzo bardzo przydatne jak widzisz ten panel jest

3:06prosty tak naprawdę nie ma tutaj żadnych czarów ale on bardzo fajnie pozwala nam

3:10pracować z mobilny stronami natomiast teraz na koniec pokażę ci jeszcze jedną

3:14fajną ukrytą rzecz jeżeli sobie tutaj przejdziemy do tego panelu i nacisnę

3:18escape wysunie nam się taka szuflada można powiedzieć jeżeli

3:22sobie klikniemy na te trzy kropki to możemy przejść do czegoś takiego jak sensors

3:27i to może nam się przydać po pierwsze tutaj możemy nadpisać geo lokalizację

3:32czyli jeżeli wiesz o co chodzi jeżeli w javascript korzystałeś z geolokalizacji to

3:36również możesz ją na sobie tutaj ustawić na sztywno wtedy ta strona będzie się

3:41zachowywała tak jakby znalazła właśnie takie współrzędne natomiast ciekawszą

3:45rzeczą jest tutaj orientacja czyli mogę sobie tutaj kliknąć custom

3:50orientation i zauważ że mogę ten telefon złapać i go po prostu przechylać

3:54no i mógłbyś zapytać co tutaj się dzieje na naszej stronie nic ale gdybyś stworzył

3:58aplikację która korzysta właśnie z tego orientation api czyli

4:02gdzie w języku javascript można odczytywać orientacje urządzenia czyli tych

4:06sensorów i na tej podstawie albo coś na stronie wyświetlać coś zmieniać i tak dalej

4:10jest sporo takich aplikacji to wtedy mógłbyś to właśnie tak przetestować czyli nie

4:14mam fizycznie telefonu w ręce ale mogę sobie tutaj poruszać tym telefonem

4:18i będzie to odwzorowywane właśnie w kodzie javascript za pomocą

4:22którego będziesz mógł modyfikować coś na twojej stronie okej to zatem tyle

4:26jeśli chodzi o panel responsive jak widzisz on nie jest skomplikowany niemniej

4:31jednak jest bardzo bardzo przydatny a w kolejnej lekcji pokażę ci jeszcze w temacie

4:35mobilnych jak możemy na urządzeniach ios debugować nasze strony