Skip to content

How to view the mobile version of WordPress sites from a computer

As technology advances, more and more people are using mobile devices to browse the internet. This is a trend that many website builders have noticed, which is why they are now creating mobile versions of their sites. As a result, it is necessary to check how these pages look on different mobile devices. This article will show you how to view the mobile version of WordPress sites from your computer.

1. Use the developer tools in your browser

The simplest and most popular way to display a mobile version of a website on a computer is to use developer tools available in most browsers. For example, in Google Chrome you can do this as follows:

  • Right-click on the page and select "Developer Tools" or use the keyboard shortcut (F12 or Ctrl+Shift+I).
  • In the developer tools, find and click on the "Toggle device toolbar" icon (keyboard shortcut Ctrl+Shift+M), which is located in the upper left corner.
  • Select the device model on which you want to test your website.
  • Refresh the page (F5).

2. Use a WordPress plugin

There are many WordPress plugins that allow you to force your site to display its mobile version on desktop computers. For example, the “Mobile Preview” plugin allows you to display a mobile version of a website on a desktop computer.

To install and configure this plugin, follow these steps:

  • Log in to the WordPress administration panel.
  • Go to "Plugins" > "Add New".
  • Search for "Mobile Preview" and click "Install Now".
  • After installation, activate the plugin.
  • Go to "Settings" > "Mobile Preview" and configure your preferred settings.

3. Use a PHP snippet

If you are more tech-savvy, you can apply the following PHP snippet to your WordPress theme to force the mobile version of your site to display on desktop computers. Remember that you should always back up your website before making any code changes.

function force_mobile_theme($theme) {
    if (isset($_GET['mobile']) && $_GET['mobile'] == 'yes') {
        return 'mobile-theme-name';
    } else {
        return $theme;
    }
}
add_filter('template', 'force_mobile_theme');
add_filter('option_template', 'force_mobile_theme');
add_filter('option_stylesheet', 'force_mobile_theme');

In this code, mobile-theme-name should be the folder name of your mobile theme. You can now test the mobile version of your site on a computer by adding “?mobile=yes” to the end of the URL.

4. Use an online service

Finally, there are many online services that allow you to test how a website looks on different devices. Some of them are:

  • MobileTest.me
  • BrowserStack
  • responsinator

They require you to enter the URL of the page and then display how the page will look on different mobile devices. Some of these services are paid but offer free trials.

Each of these methods has its advantages and disadvantages, so it's worth testing different approaches to see which one best suits your needs. Remember that the ultimate goal is to ensure that your website looks and works as well on mobile as it does on desktop.

Check out the offer of 1500+ Premium WordPress plugins and themes!