Viewport Tester Guide: Checking Layouts at Different Widths
Learn how framed previews help and where they fall short compared with a real device.
What is the Responsive Viewport Tester?
Enter a website address and pick a width, and this tool renders the page inside a preview frame in the result area at that width, so you can see roughly how a layout behaves on a smaller screen. Widths cover mobile, tablet and desktop, plus a custom pixel width. Be aware that some sites block framing and will show a blank frame; that is the site's own framing policy, not a fault in the preview.
How to use it
- Type the website address.
- Choose Mobile, Tablet, Desktop or a custom pixel width.
- Click Preview and inspect the framed page at that width.
Worked example
With no sample values, the tool renders a preview frame inside the result area at the chosen width for the address entered; sites that block framing show a blank frame, as the tool's note explains.
What width should I test first?
Start with the smallest width your visitors use, since narrow layouts are where content most often overflows or stacks badly.
Frequently asked questions
Why is the frame blank for some sites?
Because those sites send framing protections that tell browsers not to display them inside another page. The preview cannot override that policy.
Does this replace testing on a real phone?
No. It is a rough layout check; real devices also differ in touch handling, fonts and network behaviour.