Symulowanie urządzeń mobilnych w trybie urządzenia

Sofia Emelianova
Sofia Emelianova

Użyj trybu urządzenia, aby sprawdzić, jak wygląda i działa Twoja strona na urządzeniu mobilnym.

Omówienie

Tryb urządzenia to nazwa zbioru funkcji w narzędziach deweloperskich Chrome, które ułatwiają symulowanie urządzeń mobilnych. Do tych funkcji należą:

Ograniczenia

Tryb urządzenia to przybliżony sposób wyświetlania strony na urządzeniu mobilnym. W trybie urządzenia nie uruchamiasz kodu na urządzeniu mobilnym. Symulujesz wrażenia użytkownika na urządzeniu mobilnym na laptopie lub komputerze.

Istnieją pewne aspekty urządzeń mobilnych, których nie da się symulować za pomocą DevTools. Na przykład architektura procesorów mobilnych różni się znacznie od architektury procesorów do laptopów czy komputerów stacjonarnych. W razie wątpliwości najlepiej uruchomić stronę na urządzeniu mobilnym. Korzystając z funkcji zdalnego debugowania, możesz wyświetlać, zmieniać i debugować kod strony oraz tworzyć jego profil na laptopie lub komputerze stacjonarnym, gdy jest on uruchomiony na urządzeniu mobilnym.

Otwieranie paska narzędzi urządzenia

Aby otworzyć pasek narzędzi urządzenia:

  1. Otwórz Narzędzia deweloperskie.
  2. Kliknij Przełącz pasek narzędzi urządzenia znajdujący się na pasku działań u góry.

Przycisk przełącznika na pasku narzędzi urządzenia

Symulowanie widocznego obszaru na urządzeniach mobilnych

Domyślnie pasek narzędzi urządzenia otwiera się w widocznym obszarze z opcją Wymiary ustawioną na Elastyczne. Za pomocą menu Wymiary możesz symulować wymiary konkretnego urządzenia mobilnego.

Pasek narzędzi urządzenia.

Tryb elastycznego widocznego obszaru

Przeciągnij uchwyty, aby zmienić rozmiar widocznego obszaru na dowolne wymiary. Możesz też wpisać konkretne wartości w polach szerokości i wysokości. W tym przykładzie szerokość jest ustawiona na 480, a wysokość na 415.

Uchwyty do zmiany wymiarów widocznego obszaru w trybie elastycznego widocznego obszaru.

Możesz też użyć paska wstępnie ustawionego rozmiaru, aby ustawić rozmiar, klikając jedną z tych opcji:

Pasek ustawień szerokości.

Małe urządzenie mobilne Średnie urządzenie mobilne Duże urządzenie mobilne Tablet Laptop Laptop L 4K
320 pikseli 375 pikseli 425 pikseli 768 piks. 1024 pikseli 1440 pikseli 2560 pikseli

Pokaż zapytania o multimedia

Aby wyświetlić punkty przecięcia zapytań dotyczących multimediów nad obszarem widoku, kliknij Więcej opcji. Więcej opcji > Pokaż zapytania dotyczące multimediów.

Pokaż zapytania o multimedia.

Narzędzia programistyczne wyświetlają teraz 2 dodatkowe paski nad widocznym obszarem:

  • Niebieski pasek z max-width punktami przełamania.
  • Pomarańczowy pasek z min-width punktami przełamania.

Klikaj punkty graniczne, aby zmieniać szerokość widocznego obszaru, co powoduje ich aktywację.

Klikaj punkty graniczne, aby zmieniać szerokość widocznego obszaru.

Aby znaleźć odpowiednią deklarację @media, kliknij prawym przyciskiem myszy między punktami przerwania i wybierz Pokaż w źródle kodu. Narzędzia dla programistów otwierają panel Źródła na odpowiednim wierszu w Edytorze.

menu Reveal in source code (Pokaż w kodzie źródłowym).

Ustawianie współczynnika pikseli urządzenia

Współczynnik pikseli urządzenia (DPR) to stosunek fizycznych pikseli na ekranie sprzętowym do pikseli logicznych (CSS). Inaczej mówiąc, DPR informuje Chrome, ile pikseli ekranu ma użyć do narysowania piksela CSS. Chrome używa wartości DPR podczas rysowania na wyświetlaczach HiDPI (wysoka rozdzielczość pikseli na cal).

Aby ustawić wartość DPR:

  1. Kliknij Więcej opcji Więcej opcji. > Dodaj współczynnik pikseli urządzenia.

    Dodaj współczynnik pikseli urządzenia.

  2. Na pasku działań u góry widoku wybierz wartość DPR z nowego menu DPR.

    Ustawianie wartości DPR.

Ustaw typ urządzenia

Użyj listy Typ urządzenia, aby symulować urządzenie mobilne lub komputer.

Lista typów urządzeń.

Jeśli nie widzisz listy na pasku czynności u góry, kliknij Więcej opcji Więcej opcji. > Dodaj typ urządzenia.

W tabeli poniżej opisano różnice między tymi opcjami. Metoda renderowania określa, czy Chrome renderuje stronę jako widok na urządzeniu mobilnym czy na komputerze. Ikona kursora określa, jaki kursor widzisz, gdy najedziesz kursorem na stronę. Wywoływane zdarzenia określają, czy podczas interakcji z nią strona uruchamia zdarzenia touch czy click.

OpcjaMetoda renderowaniaIkona kursoraWywoływane zdarzenia
Urządzenia mobilneUrządzenia mobilneOkrągdotknij
Mobilne (bez dotyku)Urządzenia mobilneNormalnyclick
KomputerKomputerNormalnyclick
Komputery (dotykowe)KomputerOkrągdotknij

Tryb urządzenia

Aby symulować wymiary konkretnego urządzenia mobilnego, wybierz je na liście Wymiary.

Lista Wymiary.

Więcej informacji znajdziesz w artykule Dodawanie niestandardowego urządzenia mobilnego.

Obróć widok w orientacji poziomej

Kliknij Rotate, aby obrócić widok do orientacji poziomej.

Orientacja pozioma.

Pamiętaj, że przycisk Obróć Obrót. znika, jeśli pasek narzędzi urządzenia jest wąski.

Pasek narzędzi urządzenia.

Zobacz też Ustawianie orientacji.

Przełącz tryb dwóch ekranów

Niektóre urządzenia, na przykład Surface Duo, mają 2 ekrany i można ich używać na 2 sposoby: z jednym lub z obu aktywnymi ekranami.

Aby przełączać się między trybem podwójnego i pojedynczego ekranu, na pasku narzędzi kliknij Przełącz tryb dwóch ekranów.

Włączony tryb dwóch ekranów.

Ustawianie stanu urządzenia

Niektóre urządzenia, na przykład Asus Zenbook Fold, mają składane ekrany. Takie ekrany mają postawę: ciągłą lub złożoną. Tryb ciągły oznacza pozycję „płaską”, a po złożeniu tworzy kąt między sekcjami wyświetlacza.

Aby ustawić pozycję urządzenia, wybierz Ciągła lub Złożona z odpowiedniego menu na pasku narzędzi.

Postawa ustawiona na „złożony”.

Pokaż ramkę urządzenia

Podczas symulowania wymiarów konkretnego urządzenia mobilnego, np. Nest Hub, wybierz Więcej opcji Więcej opcji. > Pokaż ramkę urządzenia, aby wyświetlić ramkę fizycznego urządzenia wokół widoku.

Pokaż ramkę urządzenia.

W tym przykładzie Narzędzia deweloperskie wyświetlają ramkę Nest Hub.

Ramka urządzenia Nest Hub.

Dodawanie niestandardowego urządzenia mobilnego

Aby dodać urządzenie niestandardowe:

  1. Kliknij listę Urządzenie, a potem wybierz Edytuj.

    Edytuj.

  2. Na karcie Ustawienia > Urządzenia wybierz urządzenie z listy obsługiwanych urządzeń lub kliknij Dodaj urządzenie niestandardowe, aby dodać własne.

  3. Jeśli dodajesz własne urządzenie, wpisz jego nazwę, szerokość i wysokość, a potem kliknij Dodaj.

    Tworzenie urządzenia niestandardowego.

    Pola współczynnik pikseli urządzenia, ciąg znaków klienta użytkownikatyp urządzenia są opcjonalne. Pole typ urządzenia to lista, która domyślnie jest ustawiona na Mobile (Mobilne).

  4. W widoku wybierz nowo dodane urządzenie z listy Wymiary.

Pokaż linijki

Aby wyświetlić linijki, kliknij Więcej opcji Więcej opcji. > Pokaż linijki. Jednostka miary linijek to piksele.

Pokaż linijki.

Narzędzia dla programistów wyświetlają linijki u góry i po lewej stronie widocznego obszaru.

Linijki nad i po lewej stronie widocznego obszaru.

Aby ustawić szerokość i wysokość widocznego obszaru, kliknij linijki w określonych miejscach.

Powiększ widoczny obszar

Aby powiększyć lub pomniejszyć widok, użyj listy Powiększ.

Powiększ.

Zrób zrzut ekranu

Aby zrobić zrzut ekranu tego, co widzisz w widoku, kliknij Więcej opcji. Więcej opcji > Zrób zrzut ekranu.

Opcja Zrób zrzut ekranu w menu Więcej opcji.

Aby zrobić zrzut ekranu całej strony, w tym treści, które nie są widoczne w obszarze widoku, w tym samym menu wybierz Zrób pełnowymiarowy zrzut ekranu.

Aby podczas robienia zrzutu ekranu w trybie urządzenia uwzględnić ramkę urządzenia, najpierw pokaż ramkę urządzenia, a potem kliknij Zrób zrzut ekranu zgodnie z poprzednimi instrukcjami.

Zrzut ekranu z ramką urządzenia.

Aby dowiedzieć się, jak robić zrzuty ekranu za pomocą Narzędzi dla deweloperów, przeczytaj artykuł 4 sposoby robienia zrzutów ekranu za pomocą Narzędzi dla deweloperów.

Ograniczanie wykorzystania sieci i procesora

Aby ograniczyć zarówno sieć, jak i procesor, na liście Ograniczenie wybierz Średniej klasy urządzenia mobilne lub Urządzenia mobilne niskiej klasy.

Lista ograniczeń.

Urządzenie mobilne średniej klasy symuluje szybkie połączenie 3G i ogranicza wydajność procesora, tak aby był 4 razy wolniejszy niż normalnie. Niskiej klasy telefon symuluje wolne połączenie 3G i ogranicza wydajność procesora do 6 razy niższej niż normalnie. Pamiętaj, że ograniczenie jest względne w stosunku do normalnych możliwości laptopa lub komputera stacjonarnego.

Pamiętaj, że lista Ograniczanie będzie ukryta, jeśli pasek narzędzi urządzenia jest wąski.

Ograniczanie tylko procesora

Aby ograniczyć tylko procesor, a nie sieć, otwórz panel Skuteczność, kliknij Ustawienia Ustawienia przechwytywania. i na liście Procesor wybierz opcję 4x spowolnienie, 6x spowolnienie lub 20x spowolnienie.

Lista procesorów.

Ograniczanie wykorzystania tylko sieci

Aby ograniczyć tylko sieć, a nie procesor, otwórz panel Sieć i na liście Ograniczenie wybierz Szybkie 3G lub Wolne 3G.

Lista ograniczeń.

Możesz też nacisnąć Command + Shift + P (Mac) lub Control + Shift + P (Windows, Linux, ChromeOS), aby otworzyć menu poleceń, wpisać 3G i wybrać Włącz ograniczanie przy szybkim połączeniu 3G lub Włącz ograniczanie przy wolnym połączeniu 3G.

Menu poleceń.

Możesz też ustawić ograniczenie przepustowości sieci w panelu Skuteczność. Kliknij Ustawienia rejestrowania Ustawienia przechwytywania., a następnie na liście Sieć wybierz Szybka 3G lub Wolna 3G.

Ustawienie ograniczania przepustowości sieci w panelu Wydajność

Emulowanie czujników

Użyj panelu Czujniki, aby zastąpić geolokalizację, symulować orientację urządzenia, wymusić dotyk i emulować stan bezczynności.

W następnych sekcjach znajdziesz krótki opis tego, jak zastąpić położenie geograficzne i ustawić orientację urządzenia. Pełną listę funkcji znajdziesz w artykule Naśladowanie czujników urządzenia.

Zastępowanie geolokalizacji

Aby otworzyć interfejs nakładania lokalizacji geograficznej, kliknij Dostosowywanie i sterowanie Narzędziami deweloperskimi Dostosowywanie Narzędzi deweloperskich i zarządzanie nimi, a następnie wybierz Więcej narzędzi > Czujniki.

Czujniki

Możesz też nacisnąć Command + Shift + P (Mac) lub Ctrl + Shift + P (Windows, Linux i ChromeOS), aby otworzyć menu sterujące, wpisać Sensors, a następnie wybrać Pokaż czujniki.

Pokaż czujniki

Wybierz jedną z wstępnie zdefiniowanych lokalizacji na liście Lokalizacja lub kliknij Inne…, aby wpisać własne współrzędne. Możesz też wybrać Brak lokalizacji, aby sprawdzić, jak będzie zachowywać się strona, gdy geolokalizacja wyświetli błąd.

Geolokalizacja

Ustawianie orientacji

Aby otworzyć interfejs orientacji, kliknij Dostosowywanie i sterowanie Narzędziami deweloperskimi Dostosowywanie Narzędzi deweloperskich i zarządzanie nimi, a następnie wybierz Więcej narzędzi > Czujniki.

Czujniki

Możesz też nacisnąć Command + Shift + P (Mac) lub Ctrl + Shift + P (Windows, Linux i ChromeOS), aby otworzyć menu sterujące, wpisać Sensors, a następnie wybrać Pokaż czujniki.

Pokaż czujniki

Wybierz jeden z gotowych ustawień na liście Orientacja lub wybierz Niestandardowa orientacja, aby ustawić własne wartości alfa, beta i gamma.

Orientacja