To check the responsiveness of your WordPress website to the different device sizes, you basically have the following options:

• simulating the different device sizes resizing the browser window
• inspecting elements and using the inbuilt browser developer tools if any
• using an online responsiveness checker tool
• checking on real devices

The first three methods are in the end all based on simulating the device size.

Sophisticated tools may also try to simulate the operative system and user agent, but the most accurate method is, of course, visiting the website using different real devices.

On the other hand, simulators are less accurate, but they make you save many hours of testing, and they are perfect for making most errors come out.

Using first a simulator, and at the end checking on the most common real devices will be the best method.

During the simulation, you should already discover the most errors. You should not spend more than a couple of hours testing with real devices. This last testing phase should be just the confirmation your website is perfect on all devices.

Checking the responsiveness in the customize preview using a plugin

To speed up the simulation process, you can install the WordPress plugin Responsiveness Check that adds all that you need directly in your Customize Preview.

The plugin loads its code only when you visit the Customize Preview, so you can let it active in your installation without any worries about the performance on front-end.

Install and activate Responsiveness Check plugin

Go to Plugins => Add New and search for Freesoul Responsive Check.

Install and activate the plugin.

In the plugin page click on Check Responsiveness, or go to Appearance => Customize => Responsive Check

The device sizes simulation control panel is integrated into the customize preview. To open the control panel you can click directly on the plugin action link “Check Responsiveness” you see after activating the plugin or going to Appearance => Customize => Responsiveness Check.

Simulation features.

In the control panel you can simulate a custom device width and height  (“Simulated device CSS width” and “Simulated device CSS height” fields), or chose between the listed common devices from the “Common Smartphones”, “Common Tablets” and “Common Laptops” dropdown lists.

Moreover, you can activate the screen width animation checking the checkbox “Device width animation”.

During the animation you can scroll and check if your page needs corrections on some screen widths.

Watch the video to see how it works.

Download

If you want to download the free plugin “Freesoul Responsive Check” click on the following link.