Seminarium

Jak emulować urządzenie mobilne w przeglądarce na komputerze (Chrome, Firefox, Opera, Edge i Internet Explorer)

Istnieją strony internetowe, które oferują więcej opcji i funkcji podczas odwiedzania na urządzeniach mobilnych. Kiedy tak się dzieje i korzystasz z przeglądarki na komputerze, jesteś sfrustrowany z powodu ograniczonej wygody użytkownika. Innym razem możesz przetestować i zobaczyć, jak strona wygląda na konkretnym urządzeniu mobilnym, takim jak iPhone, iPad lub smartfon Pixel 2. Oto jak wyświetlić (i przetestować) witrynę mobilną na komputerze stacjonarnym:

UWAGA: ten przewodnik obejmuje przeglądarki Google Chrome, Mozilla Firefox, Opera, Microsoft Edge i Internet Explorer w systemie Windows. Przejdź do sekcji przeglądarki, która Cię interesuje, aby znaleźć kroki, które musisz wykonać.

Jak aktywować emulator przeglądarki mobilnej w przeglądarce Google Chrome

W przeglądarce Google Chrome załaduj witrynę mobilną, którą chcesz wyświetlić. Następnie kliknij lub stuknij trzy pionowe kropki w prawym górnym rogu. To przycisk "Dostosuj i kontroluj Google Chrome". W wyświetlonym menu wybierz Więcej narzędzi, a następnie "Narzędzia dla programistów". Narzędzia programistyczne są otwarte. Aby osiągnąć ten sam efekt, możesz również nacisnąć klawisze CTRL + Shift + I na klawiaturze.

Kliknij lub naciśnij przycisk "Przełącz pasek narzędzi urządzenia" (jest to mały przycisk, który wygląda jak smartfon i tablet blisko siebie) lub naciśnij CTRL + Shift + M na klawiaturze. Aktywuje to pasek narzędzi urządzenia, w którym ładowana jest strona mobilna. Domyślnie pasek narzędzi urządzenia korzysta z responsywnego szablonu dla wczytanej strony. Kliknij na niego i wybierz urządzenie mobilne, które chcesz emulować: Samsung Galaxy S5, Pixel 2, Pixel 2 XL, iPhone (od wersji 5 do iPhone X), iPad i iPad Pro. Strona mobilna zostanie ponownie załadowana, tak jak w przypadku smartfona lub tabletu wybranego z listy. Nie wie, że używasz komputera stacjonarnego.

Gdy skończysz, naciśnij przycisk X (Zamknij) w prawym górnym rogu narzędzi programistycznych Google Chrome, aby powrócić do standardowego trybu przeglądania na pulpicie.

Jak aktywować emulator przeglądarki mobilnej w przeglądarce Mozilla Firefox

W przeglądarce Mozilla Firefox otwórz stronę mobilną, do której chcesz uzyskać dostęp, tak jakbyś korzystał z urządzenia mobilnego. Następnie kliknij lub naciśnij przycisk hamburgera w prawym górnym rogu. Nazywa się "Otwórz menu".

W menu, które się otworzy, wybierz Web Developer .

Widzisz wiele opcji przydatnych programistom. Tą, która Cię interesuje jest "Tryb projektowania responsywnego". Kliknij lub dotknij tej opcji. Ten szczególny tryb przeglądania strony internetowej jest teraz ładowany do Firefoksa. Ten sam wynik można osiągnąć, naciskając CTRL + Shift + M na klawiaturze.

Tryb projektowania responsywnego jest włączony. Na środku ekranu widoczne są parametry używane w tym trybie. Jeśli nie wybrano żadnego urządzenia, kliknij lub dotknij listy rozwijanej z urządzeniami dostępnymi do emulacji i wybierz ten, który chcesz symulować: Samsung Galaxy S9, iPad, iPhone (od wersji 6 do iPhone X), Kindle Fire HDX, i tak dalej. Strona mobilna zostanie ponownie załadowana tak, jakby była załadowana na urządzenie mobilne wybrane do emulacji.

Kiedy skończysz, naciśnij przycisk X (Tryb Zamknij responsywną konstrukcję), aby powrócić do standardowego trybu przeglądania pulpitu.

Jak aktywować emulator przeglądarki mobilnej w Operze

W Operze załaduj stronę mobilną, którą chcesz wyświetlić, tak jakbyś korzystał z urządzenia mobilnego. Następnie kliknij ikonę Opery w lewym górnym rogu. Jest to przycisk "Dostosuj i steruj Operą" . W menu, które się otworzy, wybierz Developer, a następnie Narzędzia programistyczne . Narzędzia programistyczne wyświetlane są po prawej stronie okna przeglądarki. Ten sam efekt można uzyskać, naciskając klawisze CTRL + Shift + I na klawiaturze.

Następnie kliknij lub naciśnij przycisk "Przełącz pasek narzędzi urządzenia" (jest to mały przycisk, który wygląda jak smartfon i tablet blisko siebie) lub naciśnij CTRL + Shift + M na klawiaturze. Aktywuje to pasek narzędzi urządzenia, w którym ładowana jest twoja strona internetowa. Kliknij na niego i wybierz urządzenie mobilne, które chcesz emulować: Samsung Galaxy S5, Pixel 2, Pixel 2 XL, iPhone (od wersji 5 do iPhone X), iPad i iPad Pro. Strona mobilna zostanie ponownie załadowana do Opery, korzystając z charakterystyki smartfona lub tabletu, które wybrałeś z listy.

Kiedy skończysz, naciśnij przycisk X (Zamknij) w prawym górnym rogu narzędzi programistycznych Opery, aby powrócić do przeglądania pulpitu.

Jak aktywować emulator przeglądarki mobilnej w Microsoft Edge

W Microsoft Edge załaduj witrynę, którą chcesz wyświetlić, tak jakbyś korzystał z urządzenia mobilnego. Następnie kliknij lub naciśnij przycisk "Ustawienia i więcej" znajdujący się w prawym górnym rogu okna przeglądarki. Jego ikona wygląda jak trzy kropki. Jeśli korzystasz z aktualizacji systemu Windows 10 października 2018, przejdź do "Więcej narzędzi", a następnie do "Narzędzi dla programistów". Jeśli korzystasz z systemu Windows 10 kwietnia 2018 Update lub starszego, wybierz F12 Developer Tools . Narzędzia programistyczne są otwierane w dolnej części okna przeglądarki. Ten sam efekt można osiągnąć, naciskając klawisz F12 na klawiaturze, bez względu na to, ile lat ma system Windows 10.

Widzisz kilka zakładek w Narzędziach programisty . Jeśli widzisz Emulację, kliknij lub dotknij jej. Jeśli nie, kliknij lub stuknij strzałkę w dół, a następnie w menu, które zostanie otwarte, wybierz Emulacja .

Następnie kliknij lub wybierz rozwijaną listę Urządzenia. Możesz wybrać emulację następujących urządzeń: Lumia 650, Lumia 950, Lumia 950 XL, Surface Book, Surface Pro 4, iPad, iPad Mini, Nexus 5, Nexus 5X i Nexus 6P.

Po zakończeniu naciśnij przycisk X (Zamknij) w prawym górnym rogu narzędzi programistycznych Microsoft Edge, aby powrócić do przeglądania na pulpicie.

Jak aktywować emulator przeglądarki mobilnej w Internet Explorerze

W przeglądarce Internet Explorer na stronę mobilną, którą chcesz wyświetlić tak, jakbyś korzystał z urządzenia mobilnego. Kliknij przycisk Narzędzia w prawym górnym rogu lub naciśnij klawisze ALT + X na klawiaturze. Następnie wybierz F12 Developer Tools . Narzędzia programistyczne są wyświetlane na dole przeglądarki Internet Explorer. Ten sam efekt można uzyskać, naciskając klawisz F12 na klawiaturze.

Kliknij lub naciśnij kartę Emulacja, a następnie listę rozwijaną Przeglądarka . Tutaj musisz wybrać Windows Phone jako urządzenie mobilne, a strona internetowa zostanie ponownie załadowana tak, jakbyś korzystał ze smartfona z Windows Phone . Niestety, Internet Explorer nie oferuje opcji emulacji smartfonów z Androidem ani iPhonów i iPadów.

Po zakończeniu naciśnij przycisk X (Zamknij) w prawym górnym rogu narzędzi programisty, aby powrócić do przeglądania pulpitu.

Na których witrynach chcesz emulować urządzenie mobilne?

Teraz wiesz, jak emulować wszystkie rodzaje urządzeń mobilnych w Twojej ulubionej przeglądarce. Zanim zamkniesz ten samouczek, daj nam znać, które strony internetowe potrzebujesz do korzystania z tej funkcji emulacji. Jesteśmy bardzo ciekawi. Czy to (nie) sławny Instagram lub inna witryna mobilna?