How To View Your Website On Mobile Using A PC

Spread the love

The title of my blog post, is how to view your website on mobile using a PC or Mac. It amazes me that a large percentage of visitors view websites on phones and tablets. Even if you personally prefer to work on a desktop or laptop, it’s important to know how your site looks and behaves on smaller screens.

In this guide, I’ll show you how to view your website in a mobile layout using your PC or Mac. You won’t need any extra software, and you won’t have to keep picking up your phone to check every change you make. Everything can be done directly from your browser.

Why Check Your Website On Mobile?

Desktop and mobile visitors often have very different experiences. A site that looks perfect on a large monitor can be awkward on a small phone screen. By checking your site in mobile view, you can:

Make sure your navigation menu is easy to find and use.
Check that your text is readable without constant zooming.
Ensure buttons and links are big enough to tap with a finger.
See whether images, videos and sidebars stack neatly on smaller screens.

Ideally, you want your website to be easy to use on any device, whether it’s a desktop, laptop, tablet or phone.

Using Chrome’s Mobile View (PC or Mac)

In this tutorial I’m using the Google Chrome browser, but the steps are similar in most modern browsers. The feature we’re using is built into Chrome’s developer tools.

Step 1: Open Your Website

Open Google Chrome on your PC or Mac.
Type your website address into the address bar and press Enter.
Navigate to the page or blog post you want to test in mobile view.

Step 2: Open the Inspect Tool

Right-click anywhere on your page.
From the menu that appears, click Inspect.

This opens the developer tools panel. By default, it may appear at the bottom of your screen, but sometimes it can appear on the right-hand side.

If the panel takes up too much space, you can resize it:

Move your mouse to the edge between your website and the panel.
When your cursor changes, click and drag to make the panel bigger or smaller.

Step 3: Turn On Mobile Device View

Once the developer tools are open, look for the small icon that looks like a phone and a tablet (usually near the top left of the developer tools area). This is the Toggle device toolbar button.

Click the phone/tablet icon.
Your website will now be displayed in a narrower mobile-style window.

You are now effectively viewing your website as if it were on a mobile device.

Step 4: Choose Different Devices

At the top of the mobile preview area, you should see a dropdown menu with device names. For example:

iPhone 14
iPhone SE
Samsung Galaxy models
iPad Mini
iPad Pro
Surface Pro

You can click this dropdown and choose different devices to see how your site looks on each one.

As you select different devices, the width and height of the preview will change to mimic that device. This lets you see how your layout behaves on various screen sizes without needing to own all of those devices.

Optional: Change Orientation and Zoom

There are a couple of extra controls you might find helpful:

Rotate device: Click the rotate icon to switch between portrait and landscape view.
Zoom: Use the zoom dropdown (for example, 100%, 75%, 50%) to adjust how much of the page you can see at once.

Turning Mobile View Off

Once you’ve finished testing your website, it’s a good idea to turn mobile view off so that Chrome isn’t running any extra tools in the background.

Click the phone/tablet icon again to toggle the device toolbar off.
Close the developer tools panel by clicking the X in the corner.

Your browser will now return to normal desktop mode. If you right-click and choose Inspect again in future, it will open in the standard way without automatically using the mobile view.

Practical Things To Check In Mobile View

Here are a few useful checks you can make each time you view your website in mobile mode:

Menu and navigation: Does your menu turn into a “hamburger” icon or stay as text? Is it easy to tap?
Text size: Can you read your content comfortably without zooming?
Buttons and links: Are they spaced out enough to tap with a thumb, without hitting the wrong one?
Forms: If you have contact forms or opt-in forms, are they easy to fill in on a small screen?
Images and videos: Do they resize correctly and stay inside the screen width?

If anything looks wrong in mobile view, you can go back to your theme or page builder and adjust your layout, then refresh the page and check it again in the device toolbar.

Final Thoughts

Being able to view your website on mobile using a PC or Mac is a small habit that can make a big difference. Instead of guessing what your visitors see, you can test it properly and make adjustments with confidence.

If you have any questions about this process or anything related to building an online business, feel free to leave a comment on this post or reach out via my contact page. I’m here to help.