Test responsiveness by resizing the page in Chrome DevTools, checking just below and above each layout breakpoint, completing key tasks at narrow and wide widths, running automated audits, and then verifying important flows on a real phone. No single screenshot or audit proves an application works across screen sizes: combine layout inspection, interaction testing, accessibility checks, and real-device validation.
1. Check the viewport setup first
Before investigating a layout that looks too wide or oddly scaled on a phone, check that the document has a viewport meta tag in its <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">width=device-width aligns the layout viewport with the device width; initial-scale=1 sets the initial zoom. Without an appropriate viewport declaration, a mobile browser may lay out a page against a wider virtual viewport and scale it down. Chrome documents this setup in its viewport guidance. The related viewport check is now a Lighthouse 13 insight, so its name or placement may differ from older guides.
2. Explore widths and breakpoints in Chrome DevTools
Open Responsive mode
- Open the application in Chrome and open DevTools: right-click the page and choose Inspect, or use the browser’s DevTools keyboard shortcut.
- Toggle the device toolbar using the phone-and-tablet icon or the DevTools device toolbar shortcut.
- In the device toolbar, select Responsive. Drag the viewport edges or enter a width and height to inspect the layout at specific dimensions.
- Open the device toolbar’s options and enable Show media queries to see the page’s CSS breakpoint ranges. The exact surrounding controls can vary between Chrome versions.
Chrome’s documented responsive presets are 320px, 375px, 425px, 768px, 1024px, 1440px, and 2560px. Use them as a useful sample, not as a universal compatibility standard: your audience, product requirements, and actual CSS breakpoints determine which widths matter.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11#1 Best Overall
Test around each breakpoint
Do not only inspect the preset widths. For every breakpoint that changes the layout, test just below it, at it, and just above it. A menu or grid can appear correct on both sides while failing in the narrow interval between them. Dragging the viewport continuously is a quick way to reveal where a component wraps, overlaps, disappears, or becomes hard to use. Also check intermediate widths that reflect your users’ likely devices and browser windows.
Chrome DevTools documents viewport resizing, device-type and touch-event emulation, orientation changes, and CPU or network throttling in its Device Mode documentation.
3. Test the application’s behavior, not just its appearance
At each representative width, look for visual defects and then complete the tasks people actually use the application for. A page can look plausible in a static image while its navigation, form, or dialog is unusable.
Layout checks
- Look for clipped, overlapping, or unexpectedly hidden content, including headings, error messages, buttons, and footer links.
- Check whether the page has unintended horizontal scrolling. Scroll horizontally to identify the element causing it; a wide child can extend the document even when most of the page fits.
- Check that text remains readable and that buttons, links, and other controls do not become cramped or obstruct one another.
- Inspect images, video, embedded content, and other media for distortion, overflow, or missing space.
- Open responsive navigation and verify that its menu can be reached, opened, closed, and used at the widths where it replaces desktop navigation.
- Check forms, validation messages, dialogs, and any fixed or sticky controls at narrow widths. Confirm that fields and actions remain visible and operable when the on-screen keyboard is open on a real phone.
Task and orientation checks
Choose a short list of high-value user journeys, such as signing in, submitting a form, finding an item, or completing a purchase if those actions apply. Perform each journey at narrow, tablet, and desktop widths rather than treating a good-looking homepage as evidence that the entire application is responsive. Rotate the device where orientation matters, especially for media, maps, data-entry screens, and layouts that change significantly with height.
Record the failing width, browser, device or emulation settings, steps to reproduce, and expected versus actual behavior. That makes a visual defect actionable and gives you a repeatable check after a fix.
4. Check WCAG reflow requirements
For vertically scrolling content, assess the page at a width equivalent to 320 CSS pixels. WCAG 2.2 Success Criterion 1.4.10, Reflow, is a Level AA criterion: content must be presentable without loss of information or functionality and without requiring scrolling in two dimensions, except where a two-dimensional layout is necessary for the content’s use or meaning. See the W3C explanation of Reflow.
The exception is not a blanket exemption for a page containing a table or map. A data table or map may need its own two-dimensional scrolling region, but surrounding headings, paragraphs, and form fields should still reflow. Test that users can reach and operate content without losing information when the viewport is narrow or zoom is increased.
5. Run automated checks, then review what they cannot tell you
Run Lighthouse to identify page-quality issues and establish repeatable regression checks. Chrome’s Lighthouse overview covers DevTools, command-line and Node use, and Lighthouse CI. DevTools is convenient for a local or authenticated page; a command-line or CI workflow can make checks repeatable as part of development.
Use audit findings as defect indicators, not as proof that every responsive flow works. An automated run does not by itself establish that a user can operate a menu, complete a task with a keyboard, or use the page successfully with a screen reader. Chrome’s DevTools accessibility reference describes the available inspection features; keyboard and screen-reader operation still need hands-on checks.
6. Confirm important flows on real hardware
Device Mode is a first-order approximation, not a physical phone. It can emulate useful conditions such as viewport dimensions, touch events, orientation, and throttled CPU or network, but it cannot reproduce every mobile hardware characteristic, including CPU architecture. A real device can also expose differences involving touch, browser chrome, and device-specific behavior.
Use an existing phone when possible; buying a particular model is not a prerequisite for a useful check. For important flows, open the application on the actual device and repeat the task, paying attention to touch targets, scrolling, orientation, browser interface changes, and perceived performance. Chrome documents connecting DevTools to a mobile device for remote debugging. Choose devices and browsers according to your users and support commitments; there is no universal test matrix that fits every application.
7. Choose each test method for the question it answers
| Method | Best for | Trade-off |
|---|---|---|
| DevTools Responsive mode | Fast layout exploration, breakpoint discovery, and repeatable viewport checks | Emulation is not a physical device and cannot establish all hardware-specific behavior. |
| Lighthouse | Automated page-quality audits and repeatable regression checks, including CI workflows | Audit results do not prove every interaction, keyboard flow, or screen-reader experience works. |
| Real phone or tablet | Higher-fidelity checks of touch, browser chrome, device behavior, and important user journeys | Requires access to hardware and hands-on time; one device does not represent every user’s setup. |
These methods complement rather than replace one another. Use DevTools to explore more widths, automation to catch repeatable defects, and physical devices to validate the flows where fidelity matters.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Or skip the browser setup
If you need screenshots as visual records of pages at selected viewports, ScreenshotNeo is a website screenshot API and MCP server. It can capture PNG, JPEG, WebP, or PDF; its documented options include any viewport and 12 device presets. A screenshot is useful for comparing layouts, but it does not replace interaction testing or prove responsive accessibility.
One GET request returns a screenshot. This cURL example saves a WebP response:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpEquivalent Python:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Equivalent Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);For viewport configuration and the rest of the request options, see the ScreenshotNeo API documentation. In a responsive comparison, capture the same page at each width you care about and compare the resulting images; use DevTools or actual hardware to test interactions.
- Cookie banners are accepted and removed before capture, along with 60+ known consent platforms, newsletter popups, and chat widgets; each step can be turned off.
- Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing; response headers identify the page verdict and whether the capture was billed.
- An MCP server provides
take_screenshot,get_page_info, andcapture_pdftools for Claude, Cursor, and other MCP clients. - The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000; yearly billing gives two months free. Every feature is on every plan.
Sign up for ScreenshotNeo’s free plan to try 1,000 screenshots a month with no card.
Free tools Windows power users keep installed
One-click scans. No signup required.
Common problems and fixes
The page looks like a desktop page shrunk to fit
Check for the viewport meta tag and verify that it uses width=device-width with an appropriate initial scale. Then reload at a narrow viewport and inspect the layout again.
The page passes at presets but breaks between them
Resize continuously and inspect the media-query ranges. Test immediately below and above the breakpoint that changes the layout, then fix the component or breakpoint that fails rather than adding a test only for a preset.
Horizontal scrolling appears unexpectedly
At the failing width, inspect elements extending beyond the viewport. Check wide images, fixed-width containers, long unbroken text, navigation, and embedded content. Preserve necessary two-dimensional regions, such as a data table, within their own scrollable area instead of allowing them to force the surrounding page to scroll in two dimensions.
A Lighthouse pass gives false confidence
Keep the audit as one signal, but manually complete key tasks and check keyboard and screen-reader behavior. Automated results do not establish those experiences.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteEmulation works but a phone does not
Repeat the failing task on the physical device and note its browser, orientation, viewport behavior, and reproduction steps. Use remote debugging when you need to inspect a page actually running on the mobile device; do not assume desktop simulation reproduces every hardware or browser condition.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
