Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak zobaczyć mobilną wersję witryn WordPress z komputerów stacjonarnych

Chcesz wyświetlić podgląd mobilnej wersji twojej witryny WordPress?

Podgląd układu mobilnego pomaga zobaczyć, jak twoja witryna internetowa wygląda na urządzeniach mobilnych. Gdy twoja witryna jest w fazie rozwoju lub nawet gdy jest już uruchomiona, często łatwiej jest zobaczyć wersję mobilną na komputerze stacjonarnym. Wówczas można szybko wprowadzić zmiany i zobaczyć ich efekt.

W tym artykule pokażemy, jak zobaczyć mobilną wersję witryny WordPress z komputera stacjonarnego.

How to view the mobile version of WordPress sites from desktop

Dlaczego warto podglądać twój układ mobilny?

Ponad 50% odwiedzających Twoją witrynę internetową będzie korzystać z telefonów komórkowych, aby uzyskać do niej dostęp. Około 3% będzie korzystać z tabletu.

Oznacza to, że posiadanie witryny, która wygląda świetnie na urządzeniach mobilnych jest bardzo ważne.

W rzeczywistości urządzenia mobilne są tak ważne, że Google używa obecnie indeksu mobile-first dla swojego algorytmu rankingu witryn internetowych. Oznacza to, że Google użyje mobilnej wersji twojej witryny do indeksowania. Dowiedz się więcej, czytając nasz przewodnik po WordPress SEO.

Nawet jeśli korzystasz z responsywnego motywu WordPress, nadal musisz sprawdzić, jak twoja witryna wygląda na urządzeniach mobilnych. Warto stworzyć różne wersje kluczowych stron docelowych, które są zoptymalizowane pod kątem potrzeb użytkowników mobilnych.

Ważne jest, aby pamiętać, że większość podglądów mobilnych nie będzie całkowicie idealna, ponieważ istnieje tak wiele różnych rozmiarów ekranów mobilnych i przeglądarek. Ostatecznym testem powinno być zawsze sprawdzenie twojej witryny na rzeczywistym urządzeniu mobilnym.

To powiedziawszy, przyjrzyjmy się, jak można zobaczyć mobilną wersję twojej witryny internetowej WordPress na komputerze stacjonarnym.

Omówimy dwie różne metody testowania wyglądu twojej witryny na urządzeniach mobilnych przy użyciu przeglądarek stacjonarnych. Możesz kliknąć poniższe odnośniki, aby przejść do dowolnej sekcji:

Film instruktażowy

Subscribe to WPBeginner

Jeśli wolisz instrukcje pisemne, czytaj dalej.

Metoda 1: Korzystanie z konfiguratora motywów WordPressa

Możesz użyć konfiguratora motywów WordPress, aby wyświetlić podgląd mobilnej wersji twojej witryny WordPress.

Wystarczy zalogować się do twojego kokpitu WordPress i przejść do ekranu Wygląd ” Dostosuj.

Go to theme customizer from WordPress dashboard

Spowoduje to otwarcie konfiguratora motywu WordPress. W tym poradniku będziemy używać motywu Astra.

W zależności od używanego motywu, w menu po lewej stronie mogą być widoczne nieco inne opcje.

View options in theme customizer

W dolnej części ekranu wystarczy kliknąć ikonkę telefonu komórkowego.

Zobaczysz podgląd wyglądu twojej witryny na urządzeniach mobilnych.

View mobile screen preview

Ta metoda podglądu wersji mobilnej jest szczególnie przydatna, gdy twój blog nie został jeszcze ukończony lub gdy jest w trybie konserwacji.

Teraz możesz wprowadzić zmiany w swojej witrynie internetowej i sprawdzić, jak wyglądają, zanim udostępnisz je na żywo.

Metoda 2: Korzystanie z trybu urządzenia DevTools w Google Chrome

Kolejną metodą na zobaczenie mobilnej wersji witryny internetowej jest skorzystanie z przeglądarki Google Chrome.

Przeglądarka Google Chrome posiada zestaw narzędzi deweloperskich, które pozwalają na sprawdzenie dowolnej witryny internetowej, w tym podgląd jej wyglądu na urządzeniach mobilnych.

Wystarczy otworzyć przeglądarkę Google Chrome na twoim komputerze i przejść na stronę, którą chcesz sprawdzić. Może to być podgląd strony w twojej witrynie, a może to być nawet witryna internetowa twojego konkurenta.

Następnie należy kliknąć prawym przyciskiem myszy na stronę i wybrać opcję „Inspect”.

Right click to open the inspect option

Otworzy się nowy panel po prawej stronie lub na dole ekranu.

Będzie to wyglądać mniej więcej tak:

View the inspect tool

W widoku deweloperskim będziesz mógł zobaczyć kod źródłowy HTML twojej witryny, CSS i inne szczegóły.

Następnie należy kliknąć przycisk „Toggle Device Toolbar”, aby przejść do widoku mobilnego.

Click the toggle device toolbar

Zobaczysz podgląd twojej witryny internetowej zmniejszony do rozmiaru ekranu mobilnego.

Ogólny wygląd twojej witryny internetowej zmieni się również w widoku mobilnym. Na przykład menu zwinie się, a dodatkowe ikonki przesuną się na lewo zamiast na prawo od menu.

View the mobile version in inspect tool window

Po najechaniu kursorem myszy na mobilny widok twojej witryny, zmieni się on w okrąg. Okrąg ten można przesuwać za pomocą twojej myszy, aby naśladować ekran dotykowy na urządzeniu mobilnym.

Możesz także przytrzymać klawisz „Shift”, a następnie kliknąć i przesunąć twoją mysz, aby zasymulować szczypanie ekranu telefonu komórkowego w celu powiększenia lub pomniejszenia.

Nad mobilnym widokiem twojej witryny zobaczysz kilka dodatkowych opcji.

Change the dimensions for responsiveness

Ustawienia te umożliwiają wykonanie kilku dodatkowych czynności. Możesz sprawdzić, jak twoja witryna będzie wyglądać na różnych rodzajach smartfonów.

Możesz na przykład wybrać urządzenie mobilne, takie jak iPhone, i zobaczyć, jak twoja witryna będzie wyglądać na tym urządzeniu.

Możesz również symulować wydajność twojej witryny na szybkich lub wolnych połączeniach 3G. Możesz nawet obrócić ekran mobilny za pomocą ikonki obracania.

Bonus: Jak tworzyć treści dostosowane do urządzeń mobilnych w WordPressie

Ważne jest, aby twoja witryna internetowa miała responsywny wygląd, dzięki czemu użytkownicy mobilni mogą łatwo poruszać się po witrynie.

Jednak samo posiadanie responsywnej witryny może nie wystarczyć. Użytkownicy urządzeń mobilnych często szukają innych rzeczy niż użytkownicy komputerów stacjonarnych.

Wiele motywów i wtyczek premium umożliwia tworzenie elementów, które wyświetlają się inaczej na komputerach stacjonarnych i urządzeniach mobilnych. Możesz także użyć wtyczki do tworzenia stron, takiej jak SeedProd, aby edytować twoje strony docelowe w widoku mobilnym.

Previewing a custom page on mobile

Powinieneś rozważyć stworzenie treści dostosowanych do urządzeń mobilnych dla twoich formularzy generowania leadów. Na urządzeniach mobilnych formularze te powinny wymagać minimalnej ilości informacji, najlepiej tylko adresu e-mail. Powinny również dobrze wyglądać i być łatwe do zamknięcia.

Więcej szczegółów można znaleźć w naszym przewodniku na temat tworzenia strony docelowej w WordPressie.

Innym świetnym sposobem na tworzenie mobilnych wyskakujących okienek i formularzy generujących leady jest OptinMonster. Jest to najpotężniejsza wtyczka WordPress do tworzenia wyskakujących okienek i narzędzie do generowania leadów na rynku.

Edit campaign design on mobile

OptinMonster posiada specjalne reguły wyświetlania ukierunkowane na urządzenia, które pozwalają wyświetlać różne kampanie użytkownikom mobilnym i użytkownikom komputerów stacjonarnych. Możesz nawet połączyć to z funkcją kierowania geograficznego OptinMonster i innymi zaawansowanymi funkcjami personalizacji, aby uzyskać najlepsze konwersje.

Więcej informacji można znaleźć w naszym przewodniku na temat tworzenia mobilnych wyskakujących okienek, które konwertują.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak podglądać mobilny układ twojej witryny. Warto również zapoznać się z naszymi eksperckimi typami najlepszych wtyczek do konwersji witryny WordPress w aplikację mobilną i poznać sposoby tworzenia witryny przyjaznej dla urządzeń mobilnych.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

22 komentarzeZostaw odpowiedź

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Dennis Muthomi

    This post couldn’t have come at a better time!
    I’ve been looking for ways to preview my WordPress site on various mobile devices without having to manually check on a bunch of different phones and tablets. I had no idea that the Google Chrome DevTools had a built-in device mode – definitely going to be using that from now on.

    • WPBeginner Support

      Glad we could show the easy way to test this :)

      Administrator

      • Dennis Muthomi

        I have just also discovered that I can take screenshots of the different device views in Chrome DevTools, there’s alot of useful tools to test

        • Mrteesurez

          That’s good, I don’t even know of this, thanks for sharing your what you discovered. In these day where larger percentage of users are using mobile to visit and browse website, it’s important to optimize one’s website for mobile and knowing how to preview it on different screens making it easier to adjust site’s elements.

  3. Mrteesurez

    I normally used page builder for this, now I just discovered we can use theme customizer, it’s even shows the three screens size to switch between different devices screen. Thanks.

  4. Ralph

    On my website I have even 75-77% mobile traffic every single month. My theme is responsive but article preview (mobile) in wordpress itself never looks like a post on my phone. Nor on my wifes phone.
    With my new website I’m making from scratch I even think about building it 100% for mobile users.
    Is SeedProd ok for that? Or I should look up for specific builder?

    • WPBeginner Support

      SeedProd will allow you to create a responsive theme for your site :)

      Administrator

  5. Moinuddin waheed

    This is very important aspect as most of the traffic comes from the mobile itself and having a good user interface will definitely help in good visual experience.
    I have used generateblocks pro and generatepress and it has also the same feature to tweak the mobile version appearance of the website.
    Almost all the themes and page builders now a days include this feature.

    • WPBeginner Support

      It is definitely a good feature to have :)

      Administrator

  6. Jiří Vaněk

    Elementor also offers a similar function for those building websites using this builder. At the bottom of the left-hand menu, there’s a toggle feature to display the layout. Here, you can switch between desktop, tablet, and mobile views. You can also add your own breakpoints and create custom resolutions for testing purposes. Personally, I’ve found it very useful to check the website’s appearance across multiple devices because, surprisingly, due to the responsive template, the article layout, especially with Elementor, can look dramatically different.

    • WPBeginner Support

      Thank you for sharing, page builders have started adding this view toggle for their users :)

      Administrator

      • Moinuddin Waheed

        I think almost all the page builders are now making this option to make the mobile version look and appearance to be as good as the desktop version.
        I have been using seedprod and found it to be very smooth in testing mobile version.
        the best thing about seedprod is that we don’t need to make much changes to have good mobile appearance rather a small tweak does the job in most of the cases.

  7. ilham ilmam aufar

    hello wpbeginner,
    what if i want make mobilw view permanent on desktop view?
    thanks :)

  8. Sakirah

    Hello, I have a problem with loading my site on mobile. It displays as Mobile Site view, classic version without theme. I have to click View Full Site at the bottom to display the responsive theme. I want to force View Full Site so that the responsive theme is auto display to any mobile.

    • WPBeginner Support

      You would want to check your site to see if you have a plugin that would be enabling that mobile view as that should not be default WordPress behavior.

      Administrator

  9. daniel

    there’s a much easier way to do this just by clicking the inspect tool and enable mobile mode ( button on the yop left with a phone icon ).

    • WPBeginner Support

      That is method 2 in this article.

      Administrator

  10. Larissa mokom

    Hello, Thank you for all the information you are sharing on here i am able to follow your guides step by step to be able to come up with my blog my question is how would i be able to fix the problem of my widgets ( home,about, contact us) not displaying when my website is pulled on a mobile device but on a computer everything is looking good.

    • WPBeginner Support

      You would want to reach out to your theme’s support to ensure this isn’t a choice based on the theme’s styling.

      Administrator

  11. Samson Onuegbu

    Whoa!

    WPbeginner always give the best hacks that many never know existed.

    We will be launching our site soon and you have just made my responsive site building job easier.

    Thanks a lot!

    • WPBeginner Support

      You’re welcome, glad you found our recommendations helpful :)

      Administrator

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.