How this preview works
This loads your page inside a fixed-size frame matching common device viewport dimensions, so you can check how your responsive layout adapts without resizing your own browser window or switching devices. It covers common desktop, tablet, and mobile breakpoints.
Many sites deliberately block being displayed inside a frame on another domain, as a security measure against clickjacking - if the preview appears blank, that is almost certainly why, not a problem with your page.
Why the preset list covers specific device sizes
Rather than offering a free-form width field, the preset sizes map to the actual, real-world viewport dimensions of popular devices and screen classes - this makes it easy to check a layout against the exact breakpoints your CSS media queries likely target, rather than an arbitrary width that doesn't correspond to any device someone would actually use.
What a frame-based preview can and can't tell you
It closely approximates how your CSS layout will reflow at a given viewport width, which is often the main thing worth checking. It does not replicate real device pixel ratio (how crisp images and text actually render on a high-density screen), touch-specific interactions like swipe gestures, or the real browser chrome (address bar, notches) that eats into actual available space - for anything depending on those, testing on a genuine device remains necessary.
Why clickjacking protection causes the blank-frame issue
Headers like X-Frame-Options and Content-Security-Policy exist specifically to stop a malicious site from secretly embedding another site in an invisible frame to trick users into clicking something they didn't intend to - a legitimate, common security practice that unfortunately also blocks legitimate preview tools like this one from loading sites that enable it.