Responsive testing

Responsive design mode on iPhone and iPad

On a laptop you press a shortcut and drag the page to any width. On an iPhone or iPad there is no such switch. Here is what you can do on the device itself, and when a desktop tool is still the better choice.

Updated 10 November 2026

Short answerSafari on iPhone and iPad has no responsive design mode. Responsive Design Mode is part of Safari on the Mac, and Chrome’s and Firefox’s device modes are desktop-only too. On the phone itself you can ask for the desktop site, resize Safari in Split View on an iPad, or use an app that renders a page at a width you choose.

What is built into iPhone and iPad

Request Desktop Website. In Safari, tap the page menu in the address bar and choose Request Desktop Website. Safari asks the site for its desktop version. It is a quick look at the desktop page, but you can’t choose a width, so it won’t tell you where a breakpoint falls.
Split View and Stage Manager on iPad. Put Safari beside another app, or resize its window in Stage Manager, and the page reflows at the narrower width. This is a real viewport change, so media queries fire. You can’t set an exact number or see the current width without adding your own readout to the page.
Rotate the device. Landscape gives you a second real width for free.

None of these lets you see an iPhone-sized layout on an iPad at an exact width, or a Mac-sized layout on an iPhone.

The desktop tools, if you have a computer

If a laptop is in reach, these are free and good:

Safari Responsive Design Mode (Mac). Develop > Enter Responsive Design Mode. Drag the page to any size or pick a preset. Same engine as iPhone Safari, so it is the closest match for iOS layout.
Chrome DevTools device mode (Mac, Windows, Linux). Toggle the device toolbar in DevTools. Presets, custom sizes and network throttling. It runs Chrome’s engine, so it shows how the layout behaves at that width in Chrome, not how iPhone Safari renders it.
Firefox Responsive Design Mode (Mac, Windows, Linux). Similar, on Firefox’s engine.
Responsively App (free, open source, desktop). Shows several device sizes of the same page side by side and mirrors your scrolling and clicks across them.
Polypane (paid, desktop). A browser built for this, with many panes and accessibility and metadata checks.
Cloud device labs such as BrowserStack (paid). Real remote devices in your browser, including real iPhones, which is what you need for engine-level bugs.

All of these need a computer. A simulated width in a desktop browser also isn’t the phone: touch behaviour, Safari’s toolbars and iOS font handling only show up on a real device.

Which to use when

You are at your desk: your browser’s device mode, or Responsively for several sizes at once. They are free and have full developer tools.
You need to know how a real iPhone renders it: the iPhone itself, with Safari Web Inspector on a Mac for debugging (see inspect element on iPhone).
You only have a phone or iPad with you and need to see the tablet or desktop layout, or check a breakpoint: an on-device viewport app.
You need Android, old iOS versions or other engines: a cloud device lab.

Responsive testing on the device with ViewPortal

ViewPortal is the on-device option. Type a URL, pick an iPhone, iPad or Mac preset or enter your own width and height, and the page’s layout viewport is set to that width, so media queries fire as they would on that device. A live readout shows the exact size. On iPad, iPhone Duo or an iPhone in landscape, multi-view puts phone, tablet and desktop widths side by side. It also opens localhost and LAN dev servers.

Its limits, plainly: it runs the iOS web engine, so it shows WebKit’s rendering at each width and doesn’t emulate Chrome or Firefox. It has tap-to-inspect, console errors and an overflow finder, but no DOM editing, network panel or throttling. At a desk, the desktop tools above do more. ViewPortal is free to download, with no accounts and no tracking. Multi-view, dev-server previews and the dev tools are in Pro, a one-time £4.99 unlock.

ViewPortal on the App Store

Questions people ask

Does Safari on iPhone have a responsive design mode?

No. Responsive Design Mode is in Safari on the Mac, under the Develop menu. On iPhone and iPad you can request the desktop site, resize Safari in Split View on an iPad, or use an app that renders a page at a chosen width.

How do I see the desktop version of a website on my iPhone?

In Safari, open the page menu in the address bar and choose Request Desktop Website. To see the desktop layout at an exact width, such as 1440 pixels, use a viewport app such as ViewPortal.

Can I use Chrome DevTools device mode on an iPhone or iPad?

No. Chrome on iOS has no DevTools. Device mode is part of desktop Chrome on Mac, Windows and Linux.

Is there a Responsively App for iPad or iPhone?

No. Responsively is a desktop app for Mac, Windows and Linux. On iPad and iPhone, ViewPortal shows several device widths of the same page side by side.

Is a simulated viewport the same as a real device?

No. It shows how the layout responds at that width. Engine differences, touch behaviour and browser toolbars only show on the real device, so test important pages on real hardware as well.