Ever wonder how your website appears on a smartphone? You don’t need your phone to check—your desktop browser can show an accurate mobile preview with touch simulation, device sizes, and even slow-network testing. Below, you’ll see exactly how to do it quickly and correctly.
We’ll also cover how to preview your site on different devices using popular website builder tools so you can spot issues before they affect visitors.
Use Desktop Browser Tools to Preview the Mobile Version of Your Website
Browsers like Google Chrome and Safari include powerful developer tools—many of which go unnoticed by everyday users. One of the most useful is the built-in device simulator, which lets you view and interact with your site as if you were on a phone or tablet, directly from your computer.
Why does this matter? According to Statista, mobile devices generate the majority of global website traffic (not including tablets). If your site delivers a poor mobile experience—slow load times, awkward spacing, elements overlapping—you’re likely losing visitors and conversions you could have kept.
If you’re running a website—especially one with ecommerce features—ensuring it’s mobile-friendly is critical. The easiest way to spot problems is by previewing your site as it appears on a smartphone. The more responsive your site is, the better your visitor experience will be, and the easier it is to convert traffic into signups, leads, or sales.
Luckily, every major browser offers a way to simulate mobile views. The interface may vary, but the core features—device sizes, orientation, zoom, and network throttling—are similar. Let’s go over how to do it in Google Chrome and Safari—two of the most commonly used browsers today.
How to View Your Mobile Site in Google Chrome on Desktop
Step 1 – Open Chrome’s Inspect Tool
There are four ways to open Chrome’s Inspect tool:
Option 1: Right-click anywhere on your webpage and select Inspect from the menu.
Option 2: Use the top menu and go to View > Developer > Developer Tools.
Option 3: Click the three-dot menu in the top-right corner of Chrome, then choose More Tools > Developer Tools.
Option 4: Use a keyboard shortcut. Press Control + Shift + C on Windows or Command + Option + C on Mac to open the inspector (or use Control + Shift + I / Command + Option + I to open DevTools). Once DevTools is open, you can jump straight to the mobile simulator with Control + Shift + M on Windows or Command + Shift + M on Mac.
Step 2 – Toggle Device Toolbar
Once the Inspect panel opens, your screen splits in two. On one side, you’ll see your site; the other side shows code and panels.
Click the Toggle Device Toolbar icon in the top-left of DevTools (a phone in front of a monitor). This switches the website preview to mobile mode and enables touch emulation, so you can drag and tap like on a real device.
You can toggle between mobile and desktop views by clicking this icon again. While in mobile mode, use the toolbar above the page to rotate orientation, set zoom to 100% for accurate sizing, and adjust device pixel ratio (DPR) when needed.
Step 3 – Choose a Device to Preview
Use the Dimensions: Responsive dropdown at the top to pick from a list of common devices—like iPhone and Pixel models—or stick with “Responsive” and drag the handles to test breakpoints.
You can edit this device list, manually enter custom dimensions, or save presets to match the most common screen sizes in your analytics.
Want to simulate slow connections? Use the Throttling dropdown to test how your site performs on slower networks (e.g., “Fast 3G”) to catch layout shifts, oversized images, or render-blocking scripts. For a quick performance check, run a Lighthouse audit from the DevTools panel to spot issues that hurt Core Web Vitals.
How to View Your Mobile Site in Safari on Desktop
First, enable Safari’s Developer Tools. In macOS Sonoma and later, go to Safari > Settings, then under the Advanced tab, enable Show features for web developers. This adds the Develop menu to your top bar.
Step 1 – Open Web Inspector in Safari
You have three options to open Safari’s Web Inspector:
Option 1: Right-click on your site and select Inspect Element.
Option 2: Go to the top menu and choose Develop > Show Web Inspector.
Option 3: Use the shortcut Command + Option + I.
Step 2 – Enter Responsive Design Mode
Once the Web Inspector opens, Safari can split the screen into two. If you’re not inspecting code, skip it and go straight to Develop > Enter Responsive Design Mode.
This lets you preview your site across various Apple devices—like iPhones and iPads—or create custom screen sizes. You can rotate orientation, switch user agents, and interact with your page using touch simulation to verify navigation menus, sticky headers, and tap targets.
How to Request the Desktop Version of a Website on Mobile
With more users relying on smartphones for browsing and shopping, it’s essential to optimize for mobile. But sometimes you need to see the desktop version—especially for design testing or troubleshooting. Here’s how to do it on iOS and Android devices, along with how to switch back when you’re done.
Enable Desktop View on iPhone
The steps depend on the browser you use. Here’s how to switch to desktop mode using Safari and Google Chrome on iPhone:
Safari: Open your site, tap the Aa icon in the address bar, then choose Request Desktop Website. To make this persistent for a specific domain, tap Website Settings from the same menu and enable Request Desktop Website.
Chrome: Open your site, tap the three dots in the lower right corner, then select Request Desktop Site. To return to mobile view, repeat the steps and uncheck it.
Enable Desktop View on Android
Using Chrome on Android, visit your site, tap the three vertical dots in the top-right (Kebab menu), and check the Desktop site box. Your site will reload in desktop mode. Uncheck it to go back to the mobile view.
Alternative Ways to Preview Mobile Views
Most popular website builders offer built-in mobile view options. Whether you’re using WordPress, Wix, or another top website builder, you’ll find tools to preview desktop, tablet, and mobile layouts before publishing changes.
In WordPress, go to Appearance > Customize if you’re using a classic theme. At the bottom left, you’ll see icons for Desktop, Tablet, and Mobile—click each to preview how your site looks on different devices and make live edits in real time. If you’re using a block theme with the Site Editor, open Appearance > Editor and use the built-in preview and viewport controls in the top toolbar to check mobile layouts before you publish.
This built-in preview is especially helpful when you’re tweaking typography, spacing, and menus. Use it alongside your browser’s device simulator to verify that buttons are large enough to tap, text remains readable without zooming, and pages load quickly on slower networks.