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:

  1. Use your web browser’s developer tools. Chrome is great for this, but most other web browsers offer similar tools.
  2. 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:

Inspect button.

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.

Click this button to view the mobile version of the site

This will automatically bring up a responsive mobile view where you can change the device dimensions based on the device you want to emulate:

Change the dimensions to view the mobile version of the site

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.

select different 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.

Try the iPad Pro to view the mobile version of the site

Or you can opt for the smaller Pixel 2 XL.

Try Pixel 2

Or the even smaller Galaxy Fold. Test each of the devices on the list and make sure your site looks acceptable on each.

Change the device to view the mobile version of the site

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. 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 for example: you go to the website, paste the URL and immediately see a mobile version.

Paste the URL to view the mobile version of the site

Allows you to adjust the width, height, and visibility of the scrollbar. You can even share the results with people in your organization.

Simulator - view the mobile version of the site

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:

before learning how to view the mobile version of the site

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.

show all pages

We’ll start with one side; specifically the home page. Select the page you want.

click home page

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.

preview button

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.

Use the side section to view the mobile version of the site

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.

Use the post area to view the mobile version of the site

The desktop view occasionally looks very similar to the tablet view, so make sure you’re not zoomed in on your browser.

Desktop view button

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.

tablet view

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.

Appearance and Customize

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.

the customizer in WordPress

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.

Use these buttons to view the mobile version of the site

Click the Tablet View button to see how your current changes appear in a tablet-sized interface.

Check out the mobile version of the website in tablet view

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.

smaller mobile version

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).

Check out the menu

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.

tablet view

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.

mobile version

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Verified by MonsterInsights