How to view mobile version of website - CodeFlist
During the site’s development stage, it is not possible to open the live site on mobile devices.
What will you do if you are curious to know the appearance of the site on mobile?
Don’t fret! In this post, you will know how to view mobile version of website without switching to different devices.
When the site is live, there will be an audience from desktop, mobile, and tablet. If the majority of your audience comes from mobile, and if your site is not responsive, it will create a negative user experience.
However, you need to check the mobile version of website even if your theme is responsive.
How will you check it?
You can check it from the desktop browsers without opening the site from the mobile device. However, it may differ due to the different sizes of the mobile device. There is an option to verify the test by looking at the mobile device as well.
With the help of an in-built developer tool, you can preview the website’s mobile view and other checks needed on the site.
At first, open the site or page in a Google Chrome browser.
Right-click on that page and select “Inspect”
Then you will see a new pane on the screen.
The top part includes different menu like Elements, Console, Sources, Network, Performance, Memory, Application, Security, and Lighthouse. You will see the menu like Styles, Computed, Event Listeners, DOM Breakpoints, Properties, and Accessibility on the bottom half.
On the top left-hand corner in the developer tools, there is a Toggle device toolbar. You can click it to activate and enable mobile viewing on the other half. Alternatively, you can press Ctrl + Shift + M to start the Toggle device toolbar. Once the button becomes blue, then it is activated.
On the right side, you will be able to check the preview from different mobile devices having different resolutions by rotating and adjusting the required zoom level. You can further add the device pixel ratio from the settings and check how things work out.
You can also inspect similarly in the Microsoft Edge browser.
The process is similar to Google Chrome once you open the viewport.
At first, open the desired page or site in Firefox.
Open the top right position; just below the close icon, there is an option to open menu. Inside it, you will find Web Developer > Responsive Design Mode.
Once you open it, you will see the window identical to the previous method’s window. You will be able to select different mobile devices and enter different resolutions manually to preview the site.
You should be the admin of the site before proceeding with this method.
Log in to the dashboard with your credentials and Go to Appearance > Customize
Once you go to the customizer, you will see two different windows. The left window is where you can customize your site, and on the other side, you will see the changes. You will see these changes side by side, making it easy for you before making a decision.
You will see the respective icons of desktop, mobile, and tablet on the bottom of the left-hand window. Click on the mobile icon to check how the site looks on mobile devices. You should note that the customizer and options present in the customizer on the left-hand side will be different according to your theme.
Wrapping Up
Hopefully, this post clears the concept of how to view mobile version of website on desktop. It is especially useful when your site is in maintenance mode or creating a blog and needs some changes before publishing it.
Related Posts
As a visitor of the site and website owner, it is awful to experience errors on the site. Error pages… Read More
In the present context, every business owner maintains their own site for the online presence. When something unexpected happens with… Read More
If there are too many images on your site, they are uploaded in either PNG or JPG format. Learning how… Read More