Ponieważ jesteśmy teraz w świecie urządzeń mobilnych, coraz ważniejsze staje się możliwość łatwego testowania witryn na telefonach komórkowych lub emulowanych telefonach komórkowych. Współpracuję z ludźmi, którzy pracują nad witrynami internetowymi i ofertami w mediach społecznościowych, i chciałbym zachęcić ich do regularnego otwierania stron z przeglądarek komputerowych w widoku mobilnym. W szczególności myślę o wbudowanej w przeglądarce funkcji „widoku mobilnego”, która często jest ukryta wśród wszystkich innych narzędzi programistycznych udostępnianych przez przeglądarkę, ale cieszę się, że mogę rozważyć wszystko, co równie szybko można skonfigurować.

Jak otworzyć mobilny widok strony internetowej z przeglądarki na komputerze?

Firefox:

• W systemie Windows / Linux naciśnij Ctrl+ Shift+M
• W systemie macOS naciśnij option+ command+M

Pozycję menu można także znaleźć w („Narzędzia”), „Web Developer”, „Responsive Design Mode”.

Chrom:

Najpierw musisz otworzyć „Narzędzia programistyczne”:

• W systemie Windows / Linux naciśnij Ctrl+ Shift+ Ilub po prostuF12
• W systemie macOS naciśnij option+ command+I

Po otwarciu i skoncentrowaniu narzędzi programistycznych możesz otworzyć pasek narzędzi urządzenia:

• W systemie Windows / Linux naciśnij Ctrl+ Shift+M
• W systemie macOS naciśnij command+ shift+M

Możesz także znaleźć pozycję menu, otwierając narzędzia programistyczne („Więcej narzędzi”, „Narzędzia Develepor”), a następnie klikając ikonę, która wygląda jak telefon komórkowy przed tabelą „Przełącz pasek narzędzi urządzenia”.

Safari:

Wygląda na to, że Apple domyślnie wyłączył skrót klawiaturowy, aby przejść do trybu responsywnego projektowania. Możesz wykonać ten samouczek na temat konfigurowania skrótu klawiaturowego .

Aby znaleźć pozycję menu, kliknij „Develop”, „Enter Responsive Design Mode”. Jeśli nie widzisz pozycji menu „Opracuj”, musisz ją włączyć, otwierając „Preferencje”, „Zaawansowane” i zaznaczając „Pokaż menu rozwijania na pasku menu”.

Brzeg:

• Naciśnij, F12aby otworzyć narzędzia programistyczne, a następnie Ctrl+, 7aby otworzyć „kartę Emulacja”. Skonfiguruj urządzenie, które chcesz emulować.

Możesz otworzyć narzędzia programistyczne za pomocą myszy, klikając prawym przyciskiem myszy na stronie i wybierając „sprawdź element”.

Odpowiedź Flimma jest w 100% poprawna. Na wypadek, gdyby zapamiętanie skrótów było zbyt wielkim problemem, ten niebieski przycisk w Narzędziach programisty umożliwia przełączanie między widokiem internetowym a widokiem na telefon / tablet:

Lub z Firefoxem:

Po włączeniu paska narzędzi urządzenia możesz wybrać markę i model urządzenia, które chcesz emulować z menu rozwijanego.

Do celów testowych korzystam z następujących stron internetowych:

1. http://www.jamus.co.uk/demos/rwd-demonstrations/
2. http://mattkersley.com/responsive/

Obie powyższe witryny pozwalają mi wyświetlać moją aplikację internetową na różnych szerokościach urządzenia.

Dodaj rozszerzenie „Przełącznik agenta użytkownika” w przeglądarce i określ mobilnego agenta użytkownika. Jeśli strona internetowa jest wystarczająco inteligentna , będzie Ci służyć wersja zoptymalizowana dla urządzeń mobilnych.

Nie będę polecał żadnego konkretnego rozszerzenia. Idealny powinien mieć wbudowane ustawienia przeglądarek mobilnych oraz możliwość włączania i wyłączania przełączania agenta użytkownika dla poszczególnych witryn.

Powyższe odpowiedzi są świetne dla tych, którzy lubią trzymać się jednej przeglądarki lub mają ograniczony „obszar roboczy” pulpitu (np. Pojedynczy monitor mniej niż 21 ”w niskiej rozdzielczości).

W rzeczywistości istnieje jeszcze bardziej interesujące rozwiązanie, które niedawno odkryłem: https://blisk.io/

Powstrzymam się od używania (swego rodzaju) „linku partnerskiego” do jakichkolwiek osobistych korzyści (istnieje „system oparty na tokenach”, za pomocą którego można zdobywać kredyty, aby uzyskać takie rzeczy, jak bezpłatne „miejsce w chmurze zespołu” i „funkcje premium” do użycia z ), ale Blisk jest w rzeczywistości dość sprytny.

Ta oparta na Chromium „przeglądarka stworzona z myślą o programowaniu” zapewnia wiele sposobów demonstracji strony na różnych urządzeniach z pionowym „panelem” po LEWEJ stronie, podobnie jak w przypadku domyślnych pionowych kolumn w Chrome Developer Tools.

Wygląda jak praca. Chociaż istnieją pewne ograniczenia jego „rozszerzonej funkcjonalności freemium”, nadal działa bardzo dobrze, aby „przeglądać” zarówno wersje PC / Mobile twoich stron / witryn w porównaniu side-by-side. Płatne funkcje również wydają się całkiem niezłe, jeśli pracujesz w zdalnych zespołach (choć osobiście uważam, że potrzebuje lepszego programu „jazdy testowej” przed uzależnieniem ludzi od miesięcznego kosztu).

Pełne ujawnienie: w części mobilnej podglądu jest wyjątkowo denerwujący „limit czasowy” (przełącza otwieranie / zamykanie z ikony po prawej stronie paska adresu - zmień „podgląd urządzenia” z małego linku do łącza menu w prawym górnym rogu „Pokaż listę urządzeń”).

BliskDemoScreenshot

Ponadto: znalazłem kilka naprawdę fajnych sztuczek z rozszerzeniami przeglądarki, takich jak 2 różne „User-Agent Switcher” z Chrome / Firefox, które idą nieco dalej, pozwalając na przełączanie między ciągami przeglądarki użytkownika i agenta różnych systemów operacyjnych ORAZ przeglądarki dla nich.

Wolę smak „esolutions.se” ze względu na to, jak łatwo można dodać niestandardowe ciągi klienta użytkownika do listy, aby uzyskać tyle dostosowań, ile tylko można chcieć (działa również offline, co może być przydatne w niektórych przypadkach): https: //chrome.google.com/webstore/detail/user-agent-switcher/clddifkhlkcojbojppdojfeeikdkgiae

W każdym razie to moje 2 centy. : P