If you are a web developer, you might wonder how to access a site’s mobile version on a PC. This can help you with testing out the different versions of a website. Fortunately, the process is easier than it sounds, and you can do it within a minute.
To open the mobile version of a site on a PC, you need to go to the website and right-click on the web page. Then, you need to select “Inspect” and click on the device toggle icon to view the mobile version of the site.
Web developers need to test out different versions of their websites. They need to check whether the website they are creating is working perfectly on PC and mobile or not. While they can quickly check the PC version of the site, they sometimes face a challenge while viewing the mobile version. However, some of you don’t know that you can view the mobile version through your PC.
How To Access the Mobile Version of a Site on a PC
The method we will mention works flawlessly for both Google Chrome and Microsoft Edge, two of the most used web browsers in the world. Furthermore, we will also mention how to view the mobile version of a site on both Windows and Mac.
- Launch your internet browser.
- Go to the website.
- Right-click anywhere on the web page.
- This will open up a menu; you need to click “Inspect”. Clicking “Inspect” will take you to “Developer Tools”.
- Click on the device toggle icon in the “Developer Tools” tab. This can be found on the top left corner of the tab, right next to the arrow icon.
- Click on “Dimensions” and select a mobile device.
After you follow the steps mentioned above, you can view the website’s mobile version. The “Dimensions” option lets you select different devices, such as iPhone XR, iPad Air, Galaxy Fold, Surface Duo, etc.
There’s also an alternate way to access the “Developer Tools” tab. This is only for those who cannot open it by clicking on “Inspect”. There can be times when the “Inspect” option might not work like it’s supposed to, but the chances for this to happen are low.
However, if you do face any issues, you can follow these steps to open the “Developer Tools”.
- Go to a website.
- Click on the three vertical dots that can be found in the right corner of the tab where you enter the URL of the website.
- From the drop-down menu that will appear on your screen, click on “More Tools” > “Developer Tools”.
This will open the “Developer Tools” tab on your browser, and you can then click on the device toggle icon to view the mobile version.
If you are on Mac, you’ll be glad to know that you can also access the mobile version of a website. While everything on Mac seems complicated, opening the mobile version of a site is quite simple.
- Open your internet browser and go to a website.
- Press the F12 key on your keyboard. This will open up the “Developer Tools” tab.
- Click on the device toggle icon, and you can view the mobile version of the site after it.
How To View the Mobile Version of a Site on Different Browsers
It is important to remember that the mobile version of a website can be accessed through any web browser. It does not matter whether you are using Chrome or Firefox; you can access it through all of them. You need to find the “Developer Tools” option in every browser and click on the device toggle icon. This will help you view the mobile version on any browser.
An important thing to remember is that when using Mac, you can’t open the “Developer Tools” tab by right-clicking on the screen. Instead, it would help to press the F12 key on your keyboard. This is the only way to access the tab.
This was everything you needed to know about accessing the mobile version of a site on a PC. As you can see, the process is pretty simple and not that difficult. You can view the mobile version of a website in only a few clicks. If the Inspect option is not working for you, you can just click on the three vertical dots to access the “Developer Tools” tab. Furthermore, the process is the same for all browsers. However, when using Mac, you need to press the F12 key to access the tab.