Responsive Design Checker
Preview a website on phone, tablet, laptop and desktop screen sizes side by side.
Processing and privacy
Processing varies by tool. Check the instructions for local processing, server requests, external services and any file or request limits before entering sensitive information.
Read the privacy policyShare this tool
Found it useful? Send it to a friend or teammate.
Rate this tool
0.0
0 ratings
- 5 stars 0
- 4 stars 0
- 3 stars 0
- 2 stars 0
- 1 star 0
Clear instructions
Find steps, examples and limitations below.
Use online
Open the tool in a supported web browser.
Free to use
No sign-up required. Tool-specific limits may apply.
How to use the Responsive Design Checker
Preview a website on phone, tablet, laptop and desktop screen sizes side by side.
- 1 Enter the website address and click Preview.
- 2 Choose which devices to show and the zoom level.
- 3 Scroll inside each frame to check menus, text size and layout at that width.
Example and practical tips
If your navigation menu overlaps the logo only in the 768-pixel tablet frame, add a CSS breakpoint for that width.
Frequently asked questions
Why is a frame blank?
Some sites refuse to be shown inside frames (X-Frame-Options or CSP frame-ancestors), so they cannot be previewed this way.
Is this the same as a real phone?
It uses the same widths, but not the phone’s browser engine or touch behavior. Test important pages on real devices too.
Practical guides
-
How to Use Responsive Design Checker
Preview a website at phone, large phone, tablet, laptop and desktop screen sizes side by side to test responsive layouts, with adjustable zoom.
Report an issue
Something broken or not quite right? Tell us and we will look into it.