How to test your website on mobile without a phone

You can test most of what matters on mobile from a laptop. Use browser device mode for quick CSS checks, a multi-screen tool like doesitfit to see real phone sizes side by side, and Apple's iOS Simulator (Mac only) or Android Studio's emulator when you need the real Safari or Chrome engine. What you can't fully fake is a thumb, the on-screen keyboard and a real phone's speed, so borrow one for five minutes before launch.

The options at a glance

1. Browser device mode

Every desktop browser has one:

• Chrome and Edge: open DevTools, then press Cmd+Shift+M (Mac) or Ctrl+Shift+M (Windows).
• Firefox: Responsive Design Mode, Cmd+Option+M (Mac) or Ctrl+Shift+M (Windows).
• Safari on a Mac: turn on Settings → Advanced → Show features for web developers, then choose Develop → Enter Responsive Design Mode.

Pros: instant, free, and the inspector is right there to find the rule that broke things. Safari's version renders with WebKit, the same engine as Safari on iPhone.

Cons: no browser toolbars, so the height is too generous. Chrome's "iPhone" is still Chrome. Fonts and the mouse are your computer's, and you see one size at a time. The full list of gaps is in why DevTools device mode isn't accurate.

Tip: don't trust whatever presets happen to be installed. Type real sizes from /devices, for example 390 × 844 for an iPhone 17e or 360 × 780 for a Galaxy S25.

2. doesitfit: many real sizes at once

doesitfit shows your site on the exact CSS viewports of real devices, side by side. Paste a URL or localhost:3000 and press Try it on.

Pros:

• 123 researched devices, including display settings people change. A Galaxy S25 Ultra is 384 px wide by default, but 412, 360 or 320 depending on its Display size setting.
• Ready-made sets such as "Smallest → largest phones", from the iPhone SE at 375 × 667 up to the iPhone 17 Pro Max at 440 × 956.
• Browser bars at real heights, Rotate, Mockups and Share links.
• Stickers (FITS, TIGHT, SPILLING +Npx) with Show me where and a copy-paste fix prompt for your AI.
• It works with your localhost. In Chrome, click Allow when it asks about your local network. (Safari won't show a plain http:// page inside an https:// one.)

Cons: it renders in your own browser's engine with your computer's fonts, some third-party sites refuse to be shown inside other sites (BLOCKED), and the stickers need a one-line snippet on your own site, which the app writes a prompt for.

Prefer asking your AI? The same checks run from Claude, ChatGPT or Codex: see checking your website with MCP.

3. Xcode's iOS Simulator (Mac only)

The iOS Simulator runs iOS, real Safari included, in a window on your Mac. It's the closest you'll get to an iPhone without one.

1. Install Xcode from the Mac App Store. It's free, but a large download.
2. In Xcode, choose Xcode → Open Developer Tool → Simulator.
3. Pick a model under File → Open Simulator.
4. Open Safari in the simulator and type your address. localhost:3000 works as is, because the simulator shares your Mac's network.
5. To inspect the page, open Safari on your Mac and choose Develop → Simulator.

Pros: real WebKit, Safari's real toolbars and how they behave, iOS system fonts, the on-screen keyboard, and quirks like Safari zooming into form fields whose text is under 16 px. You can download older iOS versions in Xcode's settings to check older Safari.

Cons: Mac only, a big download, you're clicking with a mouse, and performance tells you about your Mac, not a phone.

4. Android Studio's emulator

Android Studio's emulator runs a full Android system, with Chrome, on Windows, macOS or Linux.

1. Install Android Studio (free).
2. Open the Device Manager and create a virtual device. Pick a system image marked Google Play, which comes with Chrome.
3. Start it and open Chrome.
4. To reach your computer's dev server, use http://10.0.2.2:3000. Inside the emulator, localhost means the emulator itself and 10.0.2.2 means your computer. Or run adb reverse tcp:3000 tcp:3000 on your computer and use localhost:3000 as normal.
5. Inspect the page from desktop Chrome at chrome://inspect.

Pros: real Chrome for Android, Android's real toolbars and keyboard.

Cons: heavy on memory, a bit of setup, a mouse instead of a thumb. It's also plain Android, while Samsung phones add their own display settings and their own browser.

5. Cloud real-device services

Several companies run racks of real phones in data centres and stream them to your browser. You click, they relay it to the phone as a tap.

Pros: real hardware, and many models and OS versions nobody on your team owns.

Cons: usually paid (often with a free trial), laggy, sessions time out, and to test localhost you install their tunnel app. For client work, check you're allowed to send an unreleased site to a third party.

They earn their keep when a bug only happens on one specific model. For everyday checks, the free options above cover most of it.

6. Borrow a phone and debug it remotely

Five minutes on a friend's phone catches what nothing else does. Plug it into your computer and you can inspect the page running on the phone.

iPhone (needs a Mac):

1. On the iPhone: Settings → Apps → Safari → Advanced → turn on Web Inspector. On older iOS it's Settings → Safari → Advanced.
2. Connect it to the Mac with a cable and open your site in Safari on the phone.
3. On the Mac, open Safari and choose Develop → the iPhone's name → your page.

Android (any computer with Chrome):

1. On the phone: Settings → About phone → tap Build number seven times to unlock Developer options, then turn on USB debugging.
2. Connect with a cable and accept the prompt on the phone.
3. On the computer, open chrome://inspect#devices in Chrome and click Inspect under your page.

Chrome's inspect page also has Port forwarding, which lets the phone open localhost:3000 from your computer over the cable. For Wi-Fi and tunnels, see how to open localhost on your phone.

A routine that catches most mobile bugs

1. While building: device mode for quick CSS fixes.
2. After every big change: doesitfit with the "Smallest → largest phones" set, one tablet and one laptop, Browser bars on. Fix SPILLING first (the page scrolls sideways), then TIGHT (text squeezed against the edge).
3. Before launch: the iOS Simulator if you have a Mac, plus the Android emulator or a borrowed Android.
4. Last: a real phone. Fill in every form, open the menu, rotate, scroll to the very bottom and tap the smallest link.

When something spills, paste this to your AI:

On phones 360px wide my site scrolls sideways. Find the element that is wider than the screen and fix it without changing the desktop layout. Don't just hide the overflow on the body; fix the element that causes it.

Then work through the vibe coding launch checklist and check your layout against the breakpoints that matter in 2026. If the page scrolls sideways and you can't find why, fix horizontal scrolling on mobile walks through the usual suspects.

What to do today

• Open your site in doesitfit on the smallest and largest phones in the iPhone and Samsung Galaxy lists and fix anything that spills.
• On a Mac, install Xcode and open your site in the iOS Simulator's Safari. On Windows or Linux, set up one Android emulator.
• Before launch, borrow one iPhone and one Android for five minutes each.