Jak wyświetlić mobilną wersję witryny na komputerze

Jeśli jesteś programistą internetowym lub prowadzisz firmę internetową, być może interesuje Cię, jak witryna mobilna wygląda na komputerze. Wygląd i funkcjonalność Twojej witryny mobilnej może mieć kluczowe znaczenie, ponieważ ponad połowa ruchu internetowego pochodzi z telefonów. Klienci są bardziej skłonni do pozostania na stronie dłużej lub zakupu czegoś, co jest atrakcyjne wizualnie. Widok na komputer może również pomóc w dokonywaniu zmian i szybszym rozwiązywaniu ewentualnych problemów.

Na szczęście jest to stosunkowo prosty proces. W tym artykule pokażemy, jak wyświetlić mobilną wersję strony internetowej na różnych urządzeniach iw różnych przeglądarkach.

Jak wyświetlić mobilną wersję witryny w przeglądarce Chrome na komputerze Mac

W przeglądarce Chrome możesz przetestować interfejs użytkownika i sprawdzić, czy wszystkie komponenty witryny działają poprawnie, korzystając z wbudowanego narzędzia programistycznego o nazwie DevTools. Ponieważ zapewnia predefiniowane opcje wyboru urządzeń, DevTools jest dla programisty najlepszym sposobem na szybkie przeniesienie widoku z komputera na urządzenie mobilne i odwrotnie bez żadnych rozszerzeń dla programistów.

Możesz także zmienić rozmiar ekranu, aby dopasować go do swoich potrzeb oraz dostosować szerokość i wysokość ekranu, aby zobaczyć, jak Twoja witryna będzie wyglądać na różnych rozmiarach ekranu. Aby to zrobić na komputerze Mac, wykonaj następujące kroki:

1. Uruchom przeglądarkę Google Chrome i przejdź do strony, którą chcesz wyświetlić.
   
2. Naciśnij klawisz F12 na klawiaturze, aby uzyskać dostęp do DevTools.
   
3. Gdy tryb jest włączony, kliknij ikonę „Przełącz emulację urządzenia”.
   
4. Możesz wybrać z listy urządzeń z systemem iOS i Android, aby je emulować.
   
5. Pokaże stronę w wybranej przez Ciebie formie mobilnej.
   

Kiedy skończysz, po prostu zamknij okno narzędzi programistycznych, aby zamknąć mobilną wersję witryny.

Jak wyświetlić mobilną wersję witryny w przeglądarce Chrome na komputerze z systemem Windows

Jeśli chcesz wyświetlić mobilną wersję witryny na komputerze z systemem Windows w przeglądarce Chrome, jest to dość podobny proces:

1. Otwórz przeglądarkę Chrome.
   
2. W Chrome przejdź do strony, którą chcesz zobaczyć w wersji mobilnej.
3. Kliknij prawym przyciskiem myszy stronę internetową i wybierz z menu opcję „Sprawdź”.
   
4. Aby przejść do narzędzi programistycznych, kliknij kartę „Więcej narzędzi” i wybierz „Narzędzia programistyczne” lub naciśnij klawisz F12, aby otworzyć Narzędzia programistyczne.
   
5. Otworzy się okno Narzędzia dla programistów.
6. Kliknij ikonę przełączania urządzenia, aby przejść do trybu przeglądania witryny mobilnej.
   
7. Wybierz urządzenie mobilne, które chcesz emulować (opcjonalnie).
   
8. Teraz możesz dostosować wymiary ekranu do swoich potrzeb.

Jak wyświetlić mobilną wersję witryny w przeglądarce Chrome na Chromebooku

Dostęp do mobilnej wersji strony internetowej w Chrome za pomocą Chromebooka jest bardzo podobny do dwóch pierwszych metod.

1. Otwórz przeglądarkę internetową Google Chrome.
   
2. Otwórz stronę internetową, do której chcesz uzyskać dostęp na swoim urządzeniu mobilnym.
   
3. Aby uzyskać dostęp do menu, kliknij ikonę pionowych trzech kropek.
   
4. Przeciągnij kursor myszy nad pozycję Więcej narzędzi na liście.
   
5. Wybierz „Narzędzia dla programistów”.
   
6. Otworzy się okno Narzędzia programistyczne w przeglądarce.
   
7. Przełącz tryb widoku witryny mobilnej, klikając ikonę przełączania urządzenia.
   

Spowoduje to wyświetlenie interfejsu użytkownika witryny mobilnej. Możesz także wybrać preferowaną obsługę urządzenia, wybierając markę i model z listy rozwijanej. Strona internetowa zostanie odświeżona jako witryna na komputery za każdym razem, gdy zamkniesz konsolę narzędzi programistycznych.

Jak wyświetlić mobilną wersję strony internetowej w przeglądarce Firefox na komputerze Mac

Możesz użyć innych przeglądarek internetowych, takich jak Firefox, aby wyświetlić witrynę mobilną na komputerze Mac. Zmiana rozmiaru okna przeglądarki jest jedną z metod stosowanych przez większość twórców stron internetowych do oceny responsywnej witryny internetowej. Jednak przez większość czasu ta alternatywa nie będzie wyglądać na akceptowalną.

W tym miejscu przydatne są możliwości tworzenia stron internetowych przeglądarki Firefox. Możesz przeglądać swoje strony internetowe w wielu rozdzielczościach, jeśli wiesz, jak uzyskać dostęp do mobilnych wersji stron internetowych w Firefoksie. Wykonaj następujące kroki:

1. Otwórz mobilną wersję strony, którą chcesz zobaczyć.
2. Kliknij prawym przyciskiem myszy stronę internetową i wybierz z menu opcję „Sprawdź”.
   
3. Wybierz „Tryb projektowania responsywnego”.
   
4. Wybierz rozmiar ekranu witryny.
   

Jak wyświetlić mobilną wersję strony internetowej w przeglądarce Firefox na komputerze z systemem Windows

Komputery z systemem Windows mają również opcję przeglądania mobilnych wersji stron internetowych za pomocą przeglądarki Firefox. Oto jak to zrobić:

1. Uruchom Firefoksa na swoim komputerze.
   
2. Przejdź do witryny, którą chcesz zobaczyć jako wersję mobilną.
   
3. Przejdź do „Ustawień”, klikając poziomą ikonę z trzema paskami.
   
4. Zobaczysz menu rozwijane, w którym będziesz musiał wybrać opcję „Programista stron internetowych”.
   
5. Wybierz „Tryb projektowania responsywnego”.
   
6. Na koniec możesz wybrać model smartfona, aby zobaczyć, jak Twoja witryna będzie wyglądać na tym urządzeniu.
   

Jak wyświetlić mobilną wersję strony internetowej w przeglądarce Safari na komputerze Mac

Omówiliśmy, jak wyświetlić witrynę mobilną na komputerze za pomocą przeglądarki Chrome i Firefox. Ale co z domyślną przeglądarką dostarczoną z urządzeniami Mac, Safari? Na szczęście w przeglądarce Safari można również przeglądać mobilną wersję witryny.

1. Uruchom przeglądarkę Safari.
   
2. Przejdź do witryny, którą chcesz wyświetlić w wersji mobilnej.
   
3. Kliknij „Opcje”, a następnie menu „Rozwój”.
   
4. Z menu rozwijanego wybierz „Wejdź w tryb projektowania responsywnego”.
   
5. Możesz teraz przeglądać mobilną wersję strony.
   

Dodatkowe często zadawane pytania

Czy mogę wyświetlić wersję strony internetowej na komputer na moim telefonie?

Odpowiedź brzmi tak! Możesz przełączyć się z wersji mobilnej na wersję stacjonarną, aby sprawdzić to bez użycia komputera. Kroki, aby zmienić wersję mobilną na wersję komputerową w Chrome, są następujące:

1. Przejdź do strony internetowej, którą chcesz zobaczyć w widoku pulpitu.

2. Stuknij ikonę z trzema kropkami, aby uzyskać dostęp do menu.

3. Wybierz teraz opcję „Widok pulpitu”.

Pamiętaj, że te kroki mogą się różnić w zależności od używanego telefonu.

Łatwiejsze projektowanie mobilnych stron internetowych

Narzędzia programistyczne świetnie nadają się do analizowania i modyfikowania mobilnej wersji strony internetowej na komputerze bez przełączania urządzeń. Możesz zmienić rozmiar ekranu, aby obserwować, jak działają komponenty na różnych urządzeniach. Możesz dostosować różne komponenty i stworzyć stronę internetową dla wielu rozmiarów ekranu, korzystając z trybu responsywnego.

Projektując witrynę internetową, projektant powinien zawsze mieć na uwadze wygląd interfejsu witryny na telefonach, tabletach i komputerach stacjonarnych. Korzystanie z metod opisanych w artykule może również pomóc programiście w zrobieniu tego, a także w zidentyfikowaniu, które komponenty witryny powodują problemy, aby je naprawić.

Czy kiedykolwiek próbowałeś przeglądać mobilną wersję witryny na swoim komputerze? Z jakiej przeglądarki wolisz to robić? Daj nam znać w sekcji komentarzy poniżej.