Most web traffic comes from phones and tablets, so a layout that only works on a laptop isn't finished. You can test responsive design without a drawer full of devices: every major browser can simulate different screen sizes, touch input and device pixel ratios.
This guide covers how to test responsive design in your browser, which sizes to check, what to look for and when you still need a real device.
Open device mode
Chrome and Edge:
- Open DevTools with
F12(Cmd+Option+Ion a Mac). - Press
Ctrl+Shift+M(Cmd+Shift+Mon a Mac) or click the device icon at the top left of DevTools. - Pick a device from the Dimensions dropdown, or choose Responsive and drag the handles to any size.
Firefox:
- Press
Ctrl+Shift+M(Cmd+Option+Mon a Mac) to open Responsive Design Mode. - Choose a device or type a custom width and height.
Device mode also simulates touch events, so hover effects behave as they would on a phone, and lets you set the device pixel ratio to check sharpness on high-density screens.
Which sizes to test
Rather than testing every phone on the market, test the widths where layouts tend to break:
| Range | Typical devices | What to look for |
|---|---|---|
| 320–375px | Small phones | Overflowing text, cramped buttons |
| 390–430px | Most current phones | Navigation, tap targets, images |
| 768–834px | Tablets in portrait | Awkward two-column layouts |
| 1024–1280px | Tablets in landscape, small laptops | Sidebars, grids changing column count |
| 1440px and up | Desktops | Over-wide lines of text, empty space |
Then drag the Responsive viewport slowly from narrow to wide. Breakages often appear between common sizes.
See your breakpoints
In Chrome's device toolbar, open the three-dot menu and choose Show media queries. Colored bars appear above the page for each media query in the CSS. Click a bar to jump to that width. It's the fastest way to check what happens just before and just after each breakpoint.
A responsive testing checklist
At each size, check:
- No horizontal scroll. If the page scrolls sideways, find the element that's too wide (inspect elements near the right edge).
- Readable text without zooming, with comfortable line lengths.
- Tap targets big enough and far enough apart to hit with a thumb.
- Navigation that opens, closes and is reachable with a keyboard.
- Images that scale, don't distort and aren't needlessly huge on phones.
- Forms with the right keyboard type (email, number, phone) and visible labels.
- Sticky headers and banners that don't cover too much of a small screen.
- Landscape orientation on phones, which is often forgotten.
The Network panel's throttling presets help too: phones are often on slower connections, and a layout that waits for a big image or font can look broken while it loads. Our guide to essential browser tools for web developers explains throttling and the other panels.
Common responsive bugs and quick fixes
| Symptom | Usual cause | Typical fix |
|---|---|---|
| Page scrolls sideways | A fixed-width element or long word | max-width: 100% on media, overflow-wrap: anywhere on long text |
| Images overflow their container | Fixed width on images | img { max-width: 100%; height: auto; } |
| Text too small on phones | Missing viewport meta tag | Add <meta name="viewport" content="width=device-width, initial-scale=1"> |
| Grid columns squashed | Too many fixed columns | grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) |
| Buttons hard to tap | Small targets close together | More padding and spacing between controls |
A flexible grid that adapts without media queries is often the simplest fix:
.cards {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}Fix what you find, live
When something breaks, inspect it right there in device mode and edit the CSS in the Styles pane until it works, then copy the fix into your code. How to inspect and edit HTML and CSS walks through the workflow, including the Changes tab that collects your edits.
Responsive tools in Edit Page
Edit Page includes responsive tools in its side panel, alongside its visual editor:
- Free: nine device presets, breakpoint chips taken from the page's CSS, and a one-click restore to your normal size.
- Pro: custom sizes, orientation and zoom, phone, tablet and desktop screenshots, and a live side-by-side compare page that shows several sizes at once.
Because Edit Page is a visual editor, you can also fix spacing or font sizes at a breakpoint and save the change for the site. Add Edit Page to Chrome or try the editor in your browser.
For quick window sizing without DevTools, Web Developer Tools includes resize tools with window presets, custom sizes and a responsive-layouts preview, alongside hundreds of other developer tools. It's free for Chrome, Edge and Firefox.
When to test on real devices
Browser simulation is excellent for layout, but it doesn't match a real phone in everything:
- Performance: a real mid-range phone is much slower than your laptop's CPU.
- Fonts and rendering: mobile browsers render some details differently.
- Browser UI: address bars that hide and show, safe areas and on-screen keyboards affect the viewport.
- Touch feel: scrolling, swipes and tap accuracy.
For Android, you can debug a page running on a real phone from desktop Chrome: connect the phone by USB with USB debugging enabled, then open chrome://inspect on your computer. Safari on a Mac can inspect pages on an iPhone in a similar way through its Develop menu.
Capture what you tested
Screenshots at several sizes make great bug reports and client updates. In device mode, use Capture full size screenshot from the DevTools Command Menu (Ctrl+Shift+P). See how to take a full-page screenshot in Chrome for every option.
Frequently asked questions
How do I view a website in mobile view on Chrome?
Open DevTools (F12), then press Ctrl+Shift+M (Cmd+Shift+M on a Mac) to toggle device mode, and choose a phone from the device list.
Is Chrome's device mode accurate?
It's accurate for layout, screen size, pixel ratio and touch events. It doesn't reproduce real-device performance, every rendering detail or browser UI, so test important pages on at least one real phone.
What screen sizes should I test?
Test small phones (around 320–375px), common phones (390–430px), tablets (768–1024px) and desktops (1280px and up), then drag between sizes to catch breakpoints.
How do I see media query breakpoints in Chrome?
In device mode, open the device toolbar's three-dot menu and choose Show media queries.
