Responsive testing

Test a website on multiple screen sizes side by side

One page can look tidy at 440 px and overflow at 375 px. Keeping phone, tablet and desktop widths visible together makes that difference easier to spot and easier to explain in a bug report.

Updated 12 November 2026

Short answerChoose a small set of CSS viewport widths, open the same page in each and compare the same content state. Desktop tools provide several panes at your desk. ViewPortal brings side-by-side multi-view to an iPhone in landscape, an iPad or an open iPhone Duo.

Which screen sizes matter?

Start with the narrow and wide ends of your phone layout, one tablet in each orientation and two wider windows. The phone and tablet examples below use the same numbers as our iPhone viewport sizes and iPad viewport sizes references. Laptop and desktop entries are practical window widths rather than promises about a visitor’s whole screen.

Check	CSS width	Example or purpose
Small phone	375 px	iPhone SE, 2nd or 3rd generation
Recent phone	402 px	iPhone 18 Pro, iPhone 17 and 17 Pro
Large phone	440 px	iPhone 18 Pro Max
Tablet portrait	820 px	iPad (A16), iPad Air 11-inch (M4)
Tablet landscape	1180 px	The same 11-inch iPads rotated
Laptop window	1280 px	Compact desktop navigation and columns
Desktop window	1440 px	Wider grids and maximum content width

These are starting points. Add the width from a real bug report and test just below and at your own CSS breakpoints. If the navigation changes at 768 px, compare 767 with 768. A preset list is useful coverage; your content decides where the layout should change.

Height matters as well. Rotate a phone and check a short landscape view: a sticky header, consent banner and fixed footer can consume most of the page. Include long headings, empty states and realistic product names rather than only the shortest sample content.

Desktop tools for comparing several panes

At a computer, the following tools each have a useful place in a responsive review:

Responsively is an open-source desktop app that shows device sizes together and mirrors clicks, scrolling and navigation.
Polypane combines synchronised viewport panes with accessibility, structure and metadata checks in a development browser.
Sizzy keeps devices side by side in project workspaces, with synchronised interactions and shared debugging tools.
Browser dev tools device mode gives precise custom dimensions beside a full inspector; separate browser windows can keep several checks visible.

Use the workflow that fits where you are reviewing. Keep a repeatable set of URLs, widths and content states so a later comparison answers the same questions. Run final interaction checks in the target browsers too, particularly for forms, keyboards and menus.

Compare sizes on the iPhone or iPad itself

Open the page’s full URL in ViewPortal. For work in progress, Pro opens reachable localhost/LAN development servers; follow the local server setup guide for the network address.
Turn an ordinary iPhone to landscape, use an iPad, or open an iPhone Duo. These give multi-view room to show the panes alongside one another.
Open multi-view using the columns control. Choose a phone, tablet and Mac size for the panes and check their size readouts.
Start with the same URL in each pane. Move each view to the section you are checking and reproduce the same state, such as an open menu or a long search result.
Compare line wrapping, card counts, navigation and spacing. Change a preset or enter a custom size to narrow down the width where the problem begins.

The page’s layout viewport is forced to each chosen width, so media queries respond to that width even when the preview fits inside a smaller physical screen. ViewPortal uses the WebKit engine on your iPhone or iPad. Enter a custom width and height to check Android sizes in WebKit; the Android viewport reference explains the numbers.

Give every pane the same review

Work down a short checklist rather than scanning randomly. First check the header and navigation. Then check the first content block, a dense middle section and the footer. Open the important controls and look for text that overlaps a neighbouring button or disappears below a fixed panel.

In Pro dev tools, tap a suspect element to read its size, padding, font and colour. Measure gaps when two panes have inconsistent spacing, read console errors and find horizontal overflow. For an overflowing card, follow the horizontal-scroll troubleshooting guide, then recheck after changing the CSS.

Capture and label the layout you checked

Put every pane on the relevant section and confirm the device labels and chosen sizes.
Use ViewPortal’s capture action to save the layout you checked. Label your report with the selected viewport dimensions.
Annotate the image around the faulty wrapping or spacing, then share it with the bug report.
Include the URL, expected result, reproduction steps and code version in the report’s text. Note the rendering engine and any custom dimensions.

A useful report says “the action wraps below the card at 375 px; it stays inside at 440 px”. That gives the developer a width to reproduce and an observable result to verify after the fix.

Keep your screen-size checks together

ViewPortal is free to download on iPhone and iPad, with public-URL previews, rotation, capture and annotation. ViewPortal Pro includes multi-view, localhost/LAN access and dev tools for a one-time £4.99 unlock. You get three free multi-view sessions first. The app has no accounts, analytics or tracking.

ViewPortal on the App Store

Questions people ask

Which widths should I compare first?

Start at 375, 440, 820, 1180, 1280 and 1440 CSS pixels. Add widths from bug reports and compare immediately below and at each important breakpoint.

What should I include with a screen-size capture?

Capture and annotate the layout in ViewPortal, then include the URL, selected dimensions and reproduction steps in your report. Label each capture with the width you checked.