Pixel Poke / Guides

How to test a website at real device sizes

Responsive testing means checking that a page works at the widths people actually use, from small phones to wide desktops. Pixel Poke loads the page in device frames at real sizes, and you can edit the framed element directly.

The device sizes

  • Phones: iPhone SE (375px), iPhone 15 (390px), Pixel 8 Pro (412px)
  • Tablets: iPad mini (768px), iPad Pro 11" (834px), Surface Pro (912px)
  • Desktop: Laptop (1280px), Desktop (1440px)

A responsive review

  1. Turn on Pixel Poke on the page and open the device preview.
  2. Pick a device. You can rotate phones and tablets to check landscape.
  3. Select an element inside the frame and adjust it directly: font size, spacing, layout.
  4. Move through the other sizes and check the same component at each one.
  5. Copy the CSS or the handoff notes. The handoff notes which width the change was made at.

Why it beats resizing the window

Dragging the browser window gives you arbitrary widths. Device frames give you the widths real devices use, so the problems you find are the ones real visitors will see.

FAQ

How do I preview a website on different devices?

Turn on Pixel Poke and open its device preview. It loads the page at real phone, tablet and desktop widths, from 375px to 1440px.

Can I edit the page inside the device preview?

Yes. Select the framed element and adjust it directly, then copy the CSS for that size.

Does it work on sites I do not own?

Yes. Pixel Poke works on any page Chrome can open, and your changes stay in your tab.