If you want to view the mobile version of a website from your web browser, there are five straightforward ways to do it.
The first two methods work with any type of website, regardless of which technology or platform it was built with (e.g., WordPress, Shopify), and irrespective of who owns it.
The other three methods are WordPress-specific options that will show you how to view the mobile version of a WordPress site – but only if you have access to it. In other words, you have to be able to log into the site to use these methods.
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 review both methods.
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 automatically displays a responsive, mobile view, where you can change the device dimensions based on what device you want to emulate:
To make this method even more appealing, it’s one of the few options with built-in device defaults, providing a more exact look into how your website appears on real-world devices.
As an example, you could choose an iPad Pro and it instantly adjusts the display’s dimensions to that of an iPad Pro.
Or you could opt for the smaller Pixel 3 XL.
And if there is a device that you don’t see in the default choices in Chrome, you can always customize your list by adding or removing devices.
Just tap on Edit and it will open up a side menu with 55 different devices to choose from (as of the time of this writing).
For most users that will be sufficient, but in case you have some unique mobile device that you’d like to check, you can always tap on Add Custom Device and create it.
Use an online tester or emulator
Emulators are generally used for testing apps in their native environments, but many of them are available for website responsiveness. You can also find basic testers online to paste in your URL and see what it looks like on smaller devices.
Website Responsive Testing Tool is a viable option, but you can find plenty of others with a quick online search.
The reason we suggest people try out emulators and simulators is because they give you far more control over the site dimensions. And they’re often simpler than using your browser’s developer tools.
Take the Responsive Testing Tool for instance: You go to the site, paste in the URL, and immediately see a mobile version. You can test your site for lots of mobile versions and screen sizes.
It also lets you adjust the width, height, and scrollbar visibility. You can even bookmark the mobile version of your site to quickly check it again in the future.
How to view the mobile version of your WordPress website
If you’re working on your own WordPress site, WordPress also provides some built-in options to help you see how your site will look on mobile devices.
When you’re working in the WordPress editor, you can quickly see how your content will look on different devices. You can also do the same while you’re customizing your theme in the WordPress Customizer (if you’re using a classic theme) or Full Site Editor (if you’re using a block theme).
Let’s go through these methods…
View the mobile version through the page or post editor preview
You can view a website’s mobile version on a page-by-page basis. For instance, you may want to see if your current blog post looks presentable in its mobile view. It’s also wise to check your homepage for mobile responsiveness, especially after changing the design.
Let’s start with the homepage. Here’s what the following website looks like from a top view:
You’re able to see individual page and post mobile views by going to the Posts or Pages tabs in the WordPress dashboard.
For previously created posts and pages, go to All Posts or All Pages.
We’ll begin with a page; more specifically, the Homepage. Select whichever page you want.
Every page and post in the WordPress backend offers a Preview link in the upper right corner. Select that Preview button to reveal a drop-down menu with these options:
- Desktop
- Tablet
- Mobile
By default, WordPress shows the Desktop version.
Select the Tablet or Mobile view. This will transform your website elements like images, videos, menus, and text boxes into a smaller, more readable and clickable format.
When testing your site in other views, check to see that links are clickable (not too small), assets are still visible, and everything comes out clear without forcing the user to zoom in.
eTake some time to scroll down on the page to check all the content. This site, for example, lists multiple ecommerce products on the homepage, with images, product names, and Add To Cart buttons.
They look decent, but it’s possible we’d like to switch to two or three product columns to make the product details bigger.
Posts are no different when using this method. They’re simply located under a separate section of WordPress (Posts → All Posts).
Seeing as how these contain your blog posts and not static webpages, it’s even more important to test mobile friendliness.
Why? Because many companies publish dozens of blog posts each month with only minor updates to pages. If a blog is your primary content source, you need to ensure every one of them is mobile-ready prior to publishing.
As usual, go to Preview, then click on Tablet or Mobile:
The Desktop view occasionally looks very similar to the Tablet view, so make sure you’re not zoomed in on your browser.
The Tablet view appears somewhat smaller than the Desktop view. The main difference is the extra black space around the site content, mimicking a more realistic tablet size.
View the mobile version of a website in the WordPress Customizer
If you’re using a modern WordPress block theme and you see the option for Editor when you go to Appearance → Customize (from the WordPress admin dashboard), it means that you have access to the Full Site Editor:
If that describes your situation, then you’ll want to skip to the next section, which will show you how to view the mobile version of a website in the Full Site Editor.
The WordPress Customizer not only provides excellent ways for you to edit your WordPress theme, but it has a visual preview of your site as you make edits.
Luckily, the WordPress Customizer doesn’t only restrict you to a desktop preview. In fact, it’s possible to complete all of your edits while looking at a mobile phone or tablet view.
Step one: access the Customizer
To make this happen, go to Appearance → Customize to launch the Customizer.
By default, here’s what the Customizer looks like. It’s in the standard Desktop view with settings to adjust on the left and the site preview to the right.
Step two: find the device toggle buttons
Look to the very bottom of the settings list to find three button icons: one for Desktop view, another for Tablet view, and a third for Mobile view.
Click on the Tablet view button to see how your current edits show up on an interface the size of a general tablet.
The Mobile View button makes that interface smaller, getting you closer to the standard window size of a mobile smartphone.
Note: Keep in mind that these backend mobile previews are estimates. With so many device types in the world, no one will see the exact same thing.
Step three: check the mobile version of your navigation menu
Don’t forget about the menus. Menus are notoriously troublesome on mobile devices. Check to see if the theme developer has put in a considerable amount of testing.
You’ll notice that the mobile menu typically gets placed into a hidden hamburger menu (three horizontal lines), and that you may end up with two menus (like how this theme provides ecommerce buttons at the bottom of the screen).
Step four: run a thorough audit by device type
As always, refrain from taking a quick look at the first page and assuming your entire website is ready. That’s a recipe for missing out on minor flaws that hurt your overall user experience.
Run through your entire website while in Tablet view, including everything from product pages to blog posts, and shopping carts to About Us pages.
And complete the same process in the Mobile View. We especially recommend testing out ecommerce functionality, since the last thing you want is a small checkout module or Add To Cart button.
View the mobile version of a website in the Full Site Editor
If you have a block theme then you can also preview how your pages will look on mobile and tablet devices via the Full Site Editor (FSE). Posts are another story – more on that in a moment.
Step one: access FSE and find the Pages menu item
The first step is to access FSE, which you can do from the WordPress dashboard by going to Appearance → Editor.
You will automatically be brought into the Full Site Editor, where you’ll see a lefthand side menu. The options on the menu can vary slightly from theme to theme, but in general, most block themes will have a Pages menu item. Click on it:
Step two: find which page you’d like to view in its mobile version
After you click on Pages, you’ll get another menu that will show all the available pages associated with your theme. Find the one you want and then tap on the little pencil icon (Edit) to open it up:
This will take you to the actual editor part of FSE. You’ll quickly notice that it’s not all that different from the standard WordPress block editor for pages and posts. While it does have some unique features, for the purpose of viewing the mobile version of a page, it’s identical to the block editor.
Step three: use the device toggle button to view the page in its mobile version
Look on the top right of your screen. You should see an icon that looks like a desktop/laptop screen. Tap on it and you’ll get a dropdown menu that will let you shuffle between Desktop, Tablet, and Mobile:
Viewing pages versus viewing posts
At this point you likely noticed that so far this method only applies to pages, but what about posts?
Posts are tricky and it comes down to the fact that unless you create some kind of custom layout for individual posts (which is rare), the default behavior in WordPress is for all of your posts to use the same template.
In practice, this means you can view the mobile version of your posts template, but not the mobile version of individual posts – not inside of FSE anyway. You can of course view them using the first WordPress method described earlier.
If you do want to see what your posts template looks like on mobile, then choose the Templates option from the FSE menu. Then look for Posts or Single Posts from the options. Tap on the three vertical dots next to it, and click Edit:
This will bring you into the same FSE screen as the pages but with your posts template showing instead of some individual page. From here you’ll be able to use the same toggle button on the top right of your screen to switch between Desktop, Tablet, and Mobile.
It’s easy to view the mobile version of a website
In this article, we walked through five methods on how to view the mobile version of a website, no matter who owns the website or what technology it’s built with.
The most flexible option is to use your browser’s developer tools. This will work no matter what. As long as you can open the desktop version of the website, you can preview the mobile version using developer tools.
The emulator approach also works with most public websites. The only time you might run into issues is if the site you’re trying to check has a script to block non-human visitors. This is becoming more common in the AI era as site owners try to protect their content. However, in most cases the emulator should be able to fetch the website.
For WordPress users, you can also rely on WordPress’s built-in responsive preview tools to get the job done. The other two methods work great for WordPress sites too, so this comes down to your workflow and personal choice.
Since we’re on the topic of mobile design, you might also appreciate our guide for creating a mobile-friendly website. It has some great tips on what to pay attention to while you’re designing the mobile version of your site.
Do you have any lingering questions? Let us know in the comments!
FREE GUIDE
4 Essential Steps to Speed Up Your WordPress Website
Follow the simple steps in our 4-part mini series and reduce your loading times by 50-80%. 🚀
