Check Your Website's Responsive Design on Any Screen Size
See any website on a desktop, laptop, tablet and phone at the same time.
#000000
Blank screen? Some sites block being shown inside other pages. That's a setting on the site itself, not a fault with this tool.
How it works
- Type or paste a web address into the box.
- Click GO to refresh the screens, or press Enter to reload the page with that address built into the link.
- Grab your screenshot.
Features
- Local addresses like
http://localhost/work in most browsers, so you can screenshot a site before it goes live. - Share a preview by adding
?url=to this page's address. See an example. - Each screen scrolls, so you can show more than the top of the page.
- Change the background to suit your screenshot. Share links keep your colour.
- Save snapshot downloads a .webp image of all four screens. Your browser will ask to share this tab; that's how it sees what's inside the screens.
What it's for
Lining up screenshots of every breakpoint takes time. This does it in one step, and it's a quick way to show clients what responsive design actually means when you don't have a table full of devices handy.
It isn't a testing tool. The screens are scaled-down frames of a real browser window, so always check your work on actual phones and tablets before launch.
Viewports
The sizes follow classic Apple device proportions. The 320px phone is the narrowest common layout, which makes it a good stress test for how a design squeezes down.