How to View Mobile Version of Website: In Just 3 Clicks (2023)

Themeisle content is free. When you purchase through referral links on our site, we earn a commission. Learn More

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:

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

Want to see how a #website looks on #mobile? Here's how (in 3 clicks) 📱📱📱

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:

How to View Mobile Version of Website: In Just 3 Clicks (1)

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.

How to View Mobile Version of Website: In Just 3 Clicks (2)

This automatically displays a responsive, mobile view, where you can change the device dimensions based on what device you want to emulate:

How to View Mobile Version of Website: In Just 3 Clicks (3)
(Video) Use Click To Activate On Maps For Mobile Devices | Weekly Website Win | Impact Media

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.

How to View Mobile Version of Website: In Just 3 Clicks (4)

As an example, you could choose an iPad Pro and it instantly adjusts the display’s dimensions to that of an iPad Pro.

How to View Mobile Version of Website: In Just 3 Clicks (5)

Or you could opt for the smaller Pixel 2 XL.

How to View Mobile Version of Website: In Just 3 Clicks (6)

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

How to View Mobile Version of Website: In Just 3 Clicks (7)

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. 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 for instance: You go to the site, paste in the URL, and immediately see a mobile version.

How to View Mobile Version of Website: In Just 3 Clicks (8)

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

How to View Mobile Version of Website: In Just 3 Clicks (9)

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.

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.

(Video) One Click Convert Web App to Mobile Application

Let’s start with the homepage. Here’s what the following website looks like from a desktop view:

How to View Mobile Version of Website: In Just 3 Clicks (10)

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.

How to View Mobile Version of Website: In Just 3 Clicks (11)

We’ll begin with a page; more specifically, the Homepage. Select whichever page you want.

How to View Mobile Version of Website: In Just 3 Clicks (12)

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 to see your website transform its 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.

How to View Mobile Version of Website: In Just 3 Clicks (13)

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

How to View Mobile Version of Website: In Just 3 Clicks (14)

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.

How to View Mobile Version of Website: In Just 3 Clicks (15)
(Video) Making Your Sites Tablet and Mobile Friendly With Elementor

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

How to View Mobile Version of Website: In Just 3 Clicks (16)

The Tablet view appears somewhat smaller than the Desktop view but with black space around the site content, mimicking a more realistic tablet size.

How to View Mobile Version of Website: In Just 3 Clicks (17)

View the mobile version of a website in the WordPress Customizer

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.

To make this happen, go to Appearance → Customize to launch the Customizer.

How to View Mobile Version of Website: In Just 3 Clicks (18)

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.

How to View Mobile Version of Website: In Just 3 Clicks (19)

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.

How to View Mobile Version of Website: In Just 3 Clicks (20)

Click on the Tablet view button to see how your current edits show up on an interface the size of a general tablet.

How to View Mobile Version of Website: In Just 3 Clicks (21)

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.

How to View Mobile Version of Website: In Just 3 Clicks (22)

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

How to View Mobile Version of Website: In Just 3 Clicks (23)
(Video) How to Fix Mobile Menu not Closing on Click on Single Page Website Design | JavaScript Solution

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.

How to View Mobile Version of Website: In Just 3 Clicks (24)

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.

How to View Mobile Version of Website: In Just 3 Clicks (25)

Go to top

It’s easy to view the mobile version of a website

In this article, we walked through four methods on how to view the mobile version of a website, no matter who owns the website or what technology it’s built with.

Want to see how a #website looks on #mobile? Here's how (in 3 clicks) 📱📱📱

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 websites, though the website needs to have a publicly accessible URL for the emulator to be able to fetch the website.

On the other hand, if you’re a WordPress user, you can rely on WordPress’s built-in responsive preview tools to get the job done while you’re working on your site. Or, the other methods also work great for WordPress sites.

If you need a mobile view for working on your own site, you also might want to check out our guide for creating a mobile-friendly website for some tips on what to pay attention to while you’re previewing the mobile version of your site.

Do you still have any questions about how to see the mobile version of a website? 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%.🚀

Free Access

(Video) Signs Your Phone Has Been Hacked & What You NEED To Do


How do I change Safari to mobile view? ›

First, tap the ᴀA icon in the left corner of your address bar. On the menu that pops up, select Request Mobile Website – this will trigger Safari to switch over immediately, so every page within that tab appears in its optimized form.

What is the command for mobile view? ›

In Windows/Linux, press Ctrl + Shift + I or just F12. In macOS, press option + command + I.

How do I force desktop view on mobile devices? ›

Method 1: Enable Desktop Site on Chrome Mobile Browser
  1. Launch the Chrome web browser on Android. ...
  2. Tap on the 3 vertical dots for the menu.
  3. The desktop site can be enabled by selecting the checkbox.
  4. The page will reload automatically on your browser.
  5. You will be able to view the site's desktop version on mobile devices.
May 14, 2023

How do I get non mobile version of a website on my Iphone? ›

Open the Safari browser and navigate to any website. Once the website loads, click the “aA” icon available in the top corner positioned before the address bar. It opens the website view menu. From the available options, choose the “Request Desktop Website” option.

How do I simulate mobile view in Safari? ›

Launch Safari. Navigate to the target URL that needs to be loaded in mobile view. Click on the Develop menu and select Enter Responsive Design Mode. As shown in the image below, the target URL (Wikipedia in this example) can be viewed on the desired device (like an iPad or iPhone).

How do I change Safari view settings? ›

In the Safari app on your Mac, choose Safari > Settings, then click a settings pane: General: Change your homepage, and choose what to see when you open a window or tab, how long to keep your browsing history, which bookmarks to show in Favourites view, and choose where to save downloads and how long to keep them.

Where are settings for Safari Mobile? ›

You can also adjust Safari settings in Accessibility settings. Go to Settings > Accessibility > Per-App Settings. Tap Add App, choose Safari, then tap Safari to adjust the settings.

Is there a command F for mobile? ›

Another way to find Ctrl F on your Android phone is to go to the search bar and press Ctrl+F to press. It's similar to the search function on a computer, but works on your Android device. It helps you find specific words and phrases.

How do I enable mobile view in browser? ›

Using Device Simulation in Chrome DevTools for Mobile View
  1. Open DevTools by pressing F12.
  2. Click on the “Device Toggle Toolbar” available. ( ...
  3. Choose a device you want to simulate from the iOS and Android devices list.
  4. Once the desired device is chosen, it displays the mobile view of the website.
Apr 22, 2023

How do I view non mobile sites on safari? ›

How to request a desktop site on the iPhone
  1. Launch Safari on your iPhone, and navigate to the website you wish to view.
  2. After the website loads, tap the 'aA' icon in the top corner before the address bar to open the website view menu.
  3. From the pop-up menu, select 'Request Desktop Site'.
Feb 8, 2023

Where is desktop settings in mobile? ›

Manage desktop mode settings
  1. On your Android device, open Chrome .
  2. On the right of the address bar, tap More. Settings.
  3. Under “Advanced,” select Site settings. Desktop site.
  4. Turn on Desktop site.

How do I find the mobile version of a website on my Iphone? ›

Go to the Settings > Safari > Advance > Website Data. Edit from top right, Tap on red icon and Delete for selected website that you want switch back in to mobile view.

What do you call the mobile version of a website? ›

Mobile adaptive sites and mobile responsive sites are the same, and both are synonyms for mobile friendly...

How do I find the version of a website? ›

8 Tools to View Old Versions of Any Website
  1. Wayback Machine. Wayback Machine is the go-to source for finding old web pages. ...
  2. ...
  3. ...
  4. Library of Congress. ...
  5. Search Engines Cached Pages. ...
  6. Web Cache Viewer. ...
  7. UK Web Archive. ...
  8. Memento Time Travel.
Jul 6, 2023


1. 8 Android Settings You Need To Turn Off Now [2023]
(Payette Forward)
2. How to Simulate Right-Click Interactions on Mobile Devices
3. How To Block All Porn Website on Android Mobile by Single click
(Discover You)
4. Intro to Figma Tutorial (2023) - Beginner Series 1/5
5. How to put an HTML website online (on the Internet)
6. Catch Catfish on the Internet with Grabify Tracking Links [Tutorial]
(Null Byte)
Top Articles
Latest Posts
Article information

Author: Lilliana Bartoletti

Last Updated: 18/07/2023

Views: 6168

Rating: 4.2 / 5 (53 voted)

Reviews: 92% of readers found this page helpful

Author information

Name: Lilliana Bartoletti

Birthday: 1999-11-18

Address: 58866 Tricia Spurs, North Melvinberg, HI 91346-3774

Phone: +50616620367928

Job: Real-Estate Liaison

Hobby: Graffiti, Astronomy, Handball, Magic, Origami, Fashion, Foreign language learning

Introduction: My name is Lilliana Bartoletti, I am a adventurous, pleasant, shiny, beautiful, handsome, zealous, tasty person who loves writing and wants to share my knowledge and understanding with you.