Struggling with how to view the mobile version of a website?
Well, one obvious solution is to just pull out your phone and open the website there. But if you’re reading this post, that’s probably not an option for you for some reason.
Thankfully, there are plenty of other ways to view the mobile version of a website right from your desktop web browser. So even if you don’t have access to a phone, you’ll be able to easily see the mobile version of a website no matter what.
In this post, we’re going to share four straightforward methods for how to preview the mobile version of a website:
- The first two methods will work with any type of website, whether it’s your website or someone else’s site and no matter whether it’s built with WordPress, Shopify, Wix, Squarespace, or anything else.
- The last two methods are WordPress-specific options that show you how to view the mobile version of your WordPress site. These will only work if you own the site.
How to view the mobile version of a website from your browser
Whether or not you own the website, there are two easy ways to view the mobile version of any website on the internet:
- Use your web browser’s developer tools. Chrome works great for this, but most other web browsers offer similar tools.
- Use a dedicated mobile emulator tool. All you do is enter the URL that you want to see and you’ll be able to browse it like a mobile user.
Let’s go through both methods. Then, later on, we’ll also show you how to view the mobile version of a website that you’re building yourself (on WordPress).
Use your web browser’s developer tools
Most browsers like Google Chrome, Safari, Firefox, Microsoft, and Brave offer developer tools that let you dig into a website, including seeing how it looks on different devices.
With developer tools, you can quickly see how a website looks on different smartphones, tablets, and so on.
For these examples, we’re going to assume you’re using Chrome (or any Chromium-based browser, such as Brave). However, most other web browsers offer similar features, though the interface will be different.
To begin, right-click on the frontend of your website and choose Inspect from the menu:
This launches developer tools and reveals a module on the right with coding elements from that page.
You don’t have to worry about the coding, since the primary goal is to switch to view the mobile version of the website. Find the small Toggle Device Toolbar button (it looks like a phone and tablet icon) and click it to activate the mobile view.
[…]
This article was written by Joe Warnimont and originally published on ThemeIsle Blog.