Jak wyświetlić mobilną wersję strony internetowej na komputerze?

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

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

Jak wyświetlić mobilną wersję strony internetowej w Chrome na komputerze Mac?

W Chrome możesz przetestować frontend 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 najlepszym sposobem dla programisty na szybkie przeniesienie widoku z komputera stacjonarnego na mobilny i odwrotnie, bez żadnych rozszerzeń programistycznych.

Możesz także zmienić rozmiar ekranu, aby dopasować go do swoich potrzeb i 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 witryny, którą chcesz wyświetlić.
   
2. Naciśnij 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. Wyświetli witrynę w wybranym przez Ciebie formularzu mobilnym.
   

Po zakończeniu po prostu zamknij okno narzędzi programistycznych, aby zamknąć mobilną wersję witryny.

Jak wyświetlić mobilną wersję strony internetowej w 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 stronę prawym przyciskiem myszy 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ć DevTools.
   
5. Otworzy się okno Narzędzia dla programistów.
6. Kliknij ikonę przełączania urządzenia, aby przejść do trybu widoku strony mobilnej.
   
7. Wybierz urządzenie mobilne, które chcesz emulować (opcjonalnie).
   
8. Możesz teraz dostosować wymiary ekranu do swoich potrzeb.

Jak wyświetlić mobilną wersję strony internetowej w Chrome na Chromebooku?

Dostęp do mobilnej wersji witryny 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 urządzeniu mobilnym.
   
3. Aby uzyskać dostęp do menu, kliknij ikonę trzech pionowych kropek.
   
4. Przeciągnij myszą na element Więcej narzędzi na liście.
   
5. Wybierz Narzędzia dla programistów.
   
6. Otworzy się okno narzędzi programistycznych 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 również wybrać preferowane wrażenia z urządzenia, wybierając markę i model z listy rozwijanej. Strona internetowa zostanie odświeżona jako witryna komputerowa po zamknięciu konsoli narzędzi programistycznych.

Jak wyświetlić mobilną wersję witryny w Firefoksie 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 używanych przez większość twórców stron internetowych do oceny responsywnej witryny projektowej. Jednak w większości przypadków ta alternatywa będzie nie do przyjęcia.

Tutaj przydają się 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 witryn internetowych w Firefoksie. Wykonaj następujące kroki:

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

Jak wyświetlić mobilną wersję witryny w Firefoksie na komputerze z systemem Windows?

Komputery z systemem Windows mają również opcję przeglądania mobilnych wersji witryn 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ę Web Developer.
   
5. Wybierz Responsywny tryb projektowania.
   
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ę witryny w Safari na komputerze Mac?

Omówiliśmy, jak wyświetlić witrynę mobilną na komputerze stacjonarnym za pomocą przeglądarki Chrome i Firefox. Ale co z domyślną przeglądarką dostarczaną z urządzeniami Mac, Safari? Na szczęście możliwe jest również przeglądanie mobilnej wersji strony internetowej w Safari.

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

Dodatkowe często zadawane pytania

Czy mogę wyświetlić komputerową wersję witryny na moim telefonie?

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

1. Przejdź do witryny, którą chcesz wyświetlić 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.

sprawdź, czy Twój telefon jest odblokowany

Łatwiejsze projektowanie witryn mobilnych

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

Projektując stronę internetową, projektant powinien zawsze mieć na uwadze, jak wygląda front-end strony na telefonach, tabletach i komputerach stacjonarnych. Korzystanie z metod opisanych w artykule może również pomóc deweloperowi w tym, a także zidentyfikować, które składniki witryny powodują problemy, aby je naprawić.

Czy kiedykolwiek próbowałeś wyświetlić mobilną wersję witryny na komputerze? Z której przeglądarki wolisz korzystać? Daj nam znać w sekcji komentarzy poniżej.