139 · Design & Web

Responsive Screen Size Tester

Enter a page address and pick a device size to see how the layout responds.

Many sites refuse to be shown inside other pages. It works best with your own site or a local development server.

How to use the responsive screen size tester

  1. Enter the address of the page to test.
  2. Choose a device or type a custom size.
  3. Load the page, and rotate to check landscape.

Limitations

The page loads in a frame at the exact width you choose, so its CSS media queries behave as on that screen. Many sites, including big platforms, refuse to be shown inside frames, and you’ll see a blank or error page. It works best with your own site or a local development server. It doesn’t emulate touch, a phone’s user agent or device pixel ratio; for that, use your browser’s developer tools.

Examples

390 × 844

A typical modern phone

1024 × 768

A tablet in landscape

Questions

Why is the page blank?

The site probably blocks being displayed inside other pages (X-Frame-Options or frame-ancestors). That’s a security setting on that site.