How to Preview a Page at Common Device Viewport Sizes

You’ve built a responsive layout and it looks great on your own laptop screen, but you need to confirm it actually holds up across the range of device sizes real visitors will actually use — a smaller phone, a tablet in portrait or landscape, a range of laptop and desktop widths. Physically testing on every actual device isn’t practical for most people, and resizing a single browser window manually only approximates real device viewports rather than testing against their actual dimensions.

Responsive design breaks in ways that aren’t always obvious from resizing a desktop browser window casually — real mobile viewports have specific characteristics (like different handling of hover states, or specific common width breakpoints) that a rough manual resize doesn’t fully replicate.

What testing across viewport sizes actually reveals

Different device categories have well-established common viewport dimensions — specific iPhone models, iPad in both orientations, common laptop and desktop resolutions — and testing a page rendered at each of these specific sizes reveals whether a responsive layout actually holds up at the sizes real visitors use, rather than just “looking fine” at whatever arbitrary width your own browser window happens to be. A custom width and height option extends this further, letting you check any specific size relevant to your actual audience or a particular concern.

Catching a layout break at a specific viewport size — text overflowing its container, an image not scaling correctly, a navigation menu overlapping content — before visitors encounter it is exactly the value of testing deliberately across a defined range of sizes rather than relying on incidental testing during normal development.

Why people get stuck here

• Testing only on your own device or browser window. A layout that looks fine on your specific development setup doesn’t guarantee it holds up at the range of sizes actual visitors use.
• Manually resizing a browser window as an approximation. Freely resizing a desktop browser gets you an arbitrary width, not necessarily the specific common device dimensions that matter for real-world testing.
• Not having access to physical devices for every size category. Testing on actual iPhones, iPads, and various laptop screens isn’t practical for most individual developers or small teams.
• Missing a specific problematic breakpoint. A layout can look fine at several tested widths while still breaking at one specific size in between, if testing isn’t systematic across the actual range.

What a good viewport size tester looks like

Covers common real device dimensions

Presets for iPhone, iPad, laptop, and desktop sizes mean testing against dimensions that actually matter, not an arbitrary resize.

Supports custom width and height

Being able to specify any exact dimensions covers testing needs beyond the standard presets, for a specific audience consideration or an unusual breakpoint concern.

Renders the actual page, not just a static mockup

Testing your real, embeddable page — not a screenshot or approximation — catches actual functional and layout issues, not just visual ones.

Common mistakes to avoid

• Relying solely on manually resizing a desktop browser window, missing the specific characteristics of real device viewports.
• Testing only at a few sizes and assuming everything in between is fine, when a layout can break at a specific width not directly tested.
• Not testing both orientations for tablet and phone sizes, since portrait and landscape layouts can behave quite differently.
• Assuming a layout that works on one device category (phones) automatically works for another (tablets), when their typical viewport dimensions and use patterns differ meaningfully.
• Skipping viewport testing entirely and only catching layout issues after visitors report them, rather than testing deliberately before shipping.

How to do it with Viewport Size Tester

Online Tool Store’s Viewport Size Tester previews your page entirely in your browser.

1. Open the Viewport Size Tester tool.
2. Enter the URL of the page you want to test.
3. Preview it at common device sizes — iPhone, iPad, laptop, desktop — or set a custom width and height.
4. Check for layout issues at each size before shipping.

Because it renders the actual live page, you catch real functional and visual issues, not just an approximation.

Frequently asked questions

Is testing at a few common sizes enough, or should I check every possible width?

Testing common device sizes catches the vast majority of practical issues most visitors will encounter, though checking a few widths in between common breakpoints — especially around where your CSS media queries actually change layout — can catch edge cases a fixed preset list might miss.

Should I test both portrait and landscape orientations?

Yes, especially for tablets and phones — layouts can behave quite differently between orientations, and a page that works well in one might have issues in the other that wouldn’t be caught testing only one orientation.

Does this replace testing on actual physical devices?

It’s a strong, fast approximation that catches most layout and functional issues, but final testing on a few real physical devices — especially for your most important target devices — is still worth doing before a major launch, since some rendering quirks are specific to actual device hardware and browsers.

Final thought

A layout that looks fine on your own screen doesn’t guarantee it holds up everywhere — testing deliberately across common device sizes catches breaks before real visitors do, rather than after.

Try the free Viewport Size Tester tool