Some websites have a cleaner mobile layout, show different content, or have features only available on their mobile site. Other times you want to test how a site looks on mobile without a real phone. Either way, forcing desktop browsers to show a mobile version is straightforward — here’s how.
Short Answer: Use your browser’s DevTools (F12 → device toggle) to simulate any mobile screen size. Chrome and Firefox DevTools let you pick specific device models. Alternatively, change the browser’s user agent to a mobile device string.
Method 1: Chrome DevTools Device Mode (Best Option)
This is the most accurate way to see and interact with the mobile version of any website:
- Open Chrome and go to the website
- Press F12 (Windows) or Cmd+Option+I (Mac) to open DevTools
- Click the Toggle Device Toolbar icon — it looks like a phone and tablet side by side (or press Ctrl+Shift+M)
- The page reloads in mobile view. Use the dropdown at the top to select specific devices (iPhone 15, Pixel 7, iPad, etc.)
📸 SCREENSHOT NEEDED: Chrome DevTools open with Device Mode active — showing the responsive toolbar at top with device dropdown and a mobile-width page layout
Method 2: Firefox Responsive Design Mode
Firefox has an equivalent feature called Responsive Design Mode:
- Press F12 to open DevTools
- Click the Responsive Design Mode button in the DevTools toolbar (phone+tablet icon)
- Or press Ctrl+Shift+M (Windows) / Cmd+Option+M (Mac)
- Select from preset device sizes or enter custom dimensions
Method 3: Change the User Agent String
Some websites serve different content based on your browser’s User Agent — the string that identifies what browser and device you’re using. By changing this, you can trick a site into serving its mobile version even in a full-size browser window.
In Chrome DevTools: Open DevTools → click the three-dot menu → More tools → Network conditions → Uncheck “Use browser default” under User agent → Select a mobile device from the dropdown (e.g., “Chrome — Android”).
📸 SCREENSHOT NEEDED: Chrome DevTools Network Conditions panel showing the User Agent dropdown with mobile device options
Note:
Changing the user agent changes what content the server sends you, but doesn’t change your screen size. For the most accurate mobile view, use Device Mode (Method 1) which does both.
Method 4: Use a Mobile URL Directly
Some older sites still have a separate mobile subdomain — typically m.website.com. Try adding “m.” before the domain in your browser’s address bar. This works for Twitter/X (m.twitter.com), older Facebook links, and some news sites. Most modern sites are fully responsive and don’t have a separate mobile URL.
Method 5: Chrome Extension — User-Agent Switcher
If you regularly need to switch between mobile and desktop user agents, the “User-Agent Switcher for Chrome” extension adds a toolbar button that lets you toggle between preset device profiles with one click — without opening DevTools each time.
Quick checklist:
- ✅ Use Chrome DevTools (F12 → device icon) for most cases
- ✅ Select specific devices from the dropdown for accurate simulation
- ✅ Change User Agent for sites that detect your device server-side
- ✅ Try m.website.com for older sites with separate mobile domains
- ✅ Use a User-Agent extension if you do this frequently
Frequently Asked Questions
Does Chrome Device Mode actually load the mobile version of a site?
It depends on the site. Responsive sites (which just reflow content based on screen width) will show the correct mobile layout. Sites that serve entirely different content to mobile devices (based on User Agent) require the User Agent change in addition to the screen size change.
Can I test touch gestures in Chrome Device Mode?
Yes — Device Mode simulates touch events. Swiping with your mouse simulates a finger swipe, and pinch-to-zoom can be emulated with specific DevTools settings.
Will websites load differently in DevTools Device Mode?
The layout and CSS will reflect the mobile view. Server-sent content (ads, paywalls, push notification prompts) may differ if the site uses User Agent detection. For a 100% accurate test, combine Device Mode with the correct mobile User Agent string.
More Chrome Tips ↗Back to Techtippr
For most purposes, Chrome’s built-in Device Mode (F12 → phone icon) is all you need. It’s accurate, it’s fast, and it doesn’t require any extensions or extra setup. If you’re a developer testing a site or just curious how a page looks on mobile, this should be your default first step.