How to view the mobile version of the website: In just 3 clicks
Having trouble viewing the mobile version of a website?
Well, an obvious solution is to just pull out your phone and open the website from there. But if you’re reading this post, that’s probably not an option for you for some reason.
Luckily, there are many other ways to view the mobile version of a website right from your desktop web browser. Even if you don’t have access to a phone, you can easily see the mobile version of a website no matter what.
In this post, we’ll introduce you to four easy ways to preview the mobile version of a website:
- The first two methods work with any type of website, whether it’s your website or someone else’s website, and 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 display the mobile version of your WordPress site. These only work if you own the website.
How to view the mobile version of a website in your browser
Regardless of whether you are the website owner or not, there are two easy ways to view the mobile version of any website on the internet:
- Use your web browser’s developer tools. Chrome is great for this, but most other web browsers offer similar tools.
- Use a dedicated mobile emulator tool. All you have to do is enter the URL you want to see and you can browse it like a mobile user.
Let’s go through both methods. Later we will also show you how to view the mobile version a website that you create yourself (on WordPress).
Use your web browser’s developer tools
Most browsers like Google Chrome, Safari, Firefox, Microsoft, and Brave provide developer tools that allow you to dive into a website and see how it looks on different devices.
Developer tools allow you to quickly see how a website looks on different smartphones, tablets, etc.
For these examples, we’ll assume you’re using Chrome (or any Chromium-based browser like Brave). However, most other web browsers offer similar functionality, although the user interface will be different.
First, right-click on the front end of your website and select Test from the menu:
This will launch developer tools and display a module on the right with coding items from this page.
You don’t have to worry about coding as the primary goal is to switch to displaying the mobile version of the website. find the little one Toggle device toolbar (it looks like a phone and tablet icon) and click on it to activate mobile view.
This will automatically bring up a responsive mobile view where you can change the device dimensions based on the device you want to emulate:
To make this method even more appealing, it’s one of the few options with built-in device presets, providing a closer look at how your website will appear on real devices.
As an example, you could select an iPad Pro and it will instantly adjust the dimensions of the display to match those of an iPad Pro.
Or you can opt for the smaller Pixel 2 XL.
Or the even smaller Galaxy Fold. Test each of the devices on the list and make sure your site looks acceptable on each.
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 simple testers online to paste your URL and see how it looks on smaller devices.
ResponsivePX.com is a viable option, but you can find many others with a quick online search.
The reason we recommend people try emulators and simulators is that they give you much more control over page dimensions. And they’re often easier than using your browser’s developer tools.
Take ResponsivePX.com for example: you go to the website, paste the URL and immediately see a mobile version.
Allows you to adjust the width, height, and visibility of the scrollbar. You can even share the results with people in your organization.
How to view the mobile version of your WordPress website
If you’re working on your own WordPress site, WordPress also offers some built-in options that let you see how your site will look on mobile.
Working in the WordPress editor, you can quickly see how your content will look on different devices. You can also do the same while customizing your theme in the WordPress Customizer.
Let’s go through these methods…
Preview the mobile version from the page or post editor
You can view the mobile version of a website page by page. For example, you might want to see if your current blog post looks presentable in mobile view. It’s also a good idea to check your homepage for mobile responsiveness, especially after a design change.
Let’s start with the home page. This is what the following website looks like from the desktop view:
You can view individual pages and post mobile views by going to posts or pages Tabs in the WordPress dashboard.
For previously created posts and pages go to all articles or All pages.
We’ll start with one side; specifically the home page. Select the page you want.
Every page and post in the WordPress backend offers a preview link at the top right. Select this preview button to see a dropdown menu with these options:
By default, WordPress shows the desktop version.
Select tablet or mobile view to see how your website converts its elements like images, videos, menus and text boxes into a smaller, more readable and clickable format.
If you test your site in other views, check that links are clickable (not too small), assets are still visible, and everything comes out clearly without forcing the user to zoom in.
Take some time to scroll down the page to review all of the content. For example, this website lists several e-commerce products on the home page with images, product names, and add-to-cart buttons.
They look decent, but it’s possible we might want to switch to two or three product columns to zoom in on the product details.
Posts are no different in this method. They are simply in a separate section of WordPress (Posts → All Posts).
Since these contain your blog posts and not static web pages, it’s even more important to test for mobile-friendliness. Why? Because many companies publish dozens of blog posts every month with only minor updates to the pages. If a blog is your primary source of content, you need to make sure each of them is mobile-friendly before publishing.
Go to Preview as usual, then click 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 slightly smaller than the desktop view, but with a black area around the page content, mimicking a more realistic tablet size.
Display the mobile version of a website in the WordPress Customizer
The WordPress Customizer not only gives you great ways to edit your WordPress theme, but it also provides a visual preview of your site as you make changes.
Luckily, the WordPress Customizer doesn’t just limit you to a desktop preview. In fact, it’s possible to finish all your edits while looking at the view of a mobile phone or tablet.
To do this, go to Appearance → Customize to start the customizer.
By default, the customizer looks like this. It’s in the default desktop view with customization settings on the left and site preview on the right.
Look at 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 the Tablet View button to see how your current changes appear in a tablet-sized interface.
The Mobile View button shrinks this UI, bringing it closer to the standard mobile smartphone window size.
Note: Keep in mind that these backend mobile previews are estimates. With so many types of devices in the world, no one will see exactly the same thing.
Don’t forget the menus. Menus are notoriously annoying on mobile devices. Verify that the theme developer has performed a significant amount of testing. You’ll notice that the mobile menu is usually placed in a hidden hamburger menu (three horizontal lines) and you might end up with two menus (like this theme provides ecommerce buttons at the bottom of the screen).
As always, refrain from taking a quick look at the first page and assuming your entire site is done. That’s a recipe for missing out on minor bugs that hamper your overall user experience.
Walk through your entire site in tablet view, including all product pages to blog posts and shopping carts to the About Us pages.
Perform the same process in mobile view. We especially recommend trying out the e-commerce functionality, as you definitely don’t want a small checkout module or add-to-cart button.
It’s easy to view the mobile version of a website
In this article, we’ve outlined four ways you can view the mobile version of any website, regardless of who owns the website or what technology it’s built with.
The most flexible option is to use your browser’s developer tools. It definitely works. As long as you can open the desktop version of the site, you can preview the mobile version using the developer tools.
The emulator approach also works with most websites, although the website must have a publicly accessible URL for the emulator to fetch the website.
On the other hand, if you’re a WordPress user, you can rely on WordPress’ built-in responsive preview tools to get the job done while you work on your site. Or the other methods work great for WordPress sites too.
If you need a mobile view for working on your own website, you can also read our guide to creating a mobile-friendly website for some tips on what to look out for when previewing the mobile version of your website.
