Device mode
A DevTools view that makes your desktop browser pretend to be a phone or tablet.
Phone
- ~390px wide
- One column
- Tap targets
Tablet
- ~768px wide
- Two columns
Desktop
- 1280px and up
- Sidebars and grids
What it is
Click the small phone-and-tablet icon in the corner of DevTools (or press Cmd + Shift + M) and the page shrinks to a phone-sized frame. You can pick a specific device, like an iPhone or Pixel, or drag the edges to any width.
It's the quickest way to check a responsive layout and catch the classic mobile problems: text overflowing, buttons too small to tap, sidebars that never collapse.
It's a close approximation, not a real phone. Things like the on-screen keyboard and Safari quirks still need checking on an actual device.
How to ask for it
“It looks weird on phones.”
“In DevTools device mode at 390px wide (iPhone 14), the pricing cards overflow off the right edge and the nav links wrap onto two lines. Stack the cards and collapse the nav into a menu below 768px.”
A specific width plus what breaks there gives the agent a reproducible layout bug and a clear target.
You've seen this in
- TThe phone icon at the top left of Chrome DevTools
- AA device dropdown listing "iPhone 14 Pro"
- AA ruler showing pixel widths above the page