How to test responsive design in Chrome

A responsive page should look right from a 375 px phone to a 1920 px monitor. Here are three ways to check it in Chrome, from quickest to most thorough.

1. Resize the window

Drag the edge of the browser window and watch the layout change. It is fast, but you cannot see exact widths, and Chrome will not let the window get narrower than about 500 px, so real phone sizes are out of reach.

2. DevTools device mode

1. Press F12 (or Ctrl + Shift + I, Cmd + Option + I on Mac).
2. Press Ctrl + Shift + M to turn on the device toolbar.
3. Pick a device from the list or type a width and height.

Device mode is precise and built in. Its limit is that it shows one screen at a time, so you keep switching sizes to compare.

3. Several devices side by side

Seeing a phone, a tablet and a desktop width next to each other catches problems that switching hides: a heading that wraps differently, a menu that appears at one size and not another, an image that crops badly. With scrolling synced, you can walk the whole page once and check every size together.

What to check at each size

• No sideways scroll. Anything wider than the screen, often a table, an image or a long word.
• Tap targets. Buttons and links should be at least 24 × 24 px, ideally 44 × 44 px.
• Breakpoints. Check just below and just above each media query, where layouts usually break.
• Text. Nothing cut off, nothing too small to read, and the page still works at 200% text size.

Common screen widths