Responsive Design Checker
See how a web page looks on an iPhone, an Android phone, an iPad, a laptop and a big monitor without owning them. Enter a URL, pick a device or a custom width, rotate to landscape and zoom out to view the whole layout.
Last updated:
Frames are real browser views at the exact CSS pixel width, so media queries fire as on the device. The page loads directly in your browser; nothing is sent to us. Many big sites (Google, Facebook, banks) forbid being shown inside a frame with X-Frame-Options or Content-Security-Policy: frame-ancestors; a blank frame or a "refused to connect" message means that, not a layout bug. Use Open in new tab and your browser's device mode for those.
How to use the Responsive Design Checker
- Enter the page address, for example example.com/pricing, and click Check site. https:// is added for you.
- Pick a device from the list, or type a width and height, or click a breakpoint such as 768 or 1024.
- Rotate to see landscape, and change Zoom to see a large desktop layout in one view.
- Switch to All sizes to compare phone, tablet, laptop and desktop side by side. Scroll and click inside each frame like a real browser.
- Fix and reload: after you change your CSS, press Reload to refresh every frame.
Common viewport sizes (CSS pixels)
| Device | Viewport (portrait) | Device pixel ratio | Physical resolution |
|---|---|---|---|
| iPhone SE (2nd/3rd gen) | 375 × 667 | 2 | 750 × 1334 |
| iPhone 15 / 15 Pro | 393 × 852 | 3 | 1179 × 2556 |
| iPhone 15 Pro Max | 430 × 932 | 3 | 1290 × 2796 |
| Samsung Galaxy S23 | 360 × 780 | 3 | 1080 × 2340 |
| Google Pixel 8 | 412 × 915 | 2.625 | 1080 × 2400 |
| iPad mini (6th gen) | 744 × 1133 | 2 | 1488 × 2266 |
| iPad Air 11" | 820 × 1180 | 2 | 1640 × 2360 |
| iPad Pro 12.9" | 1024 × 1366 | 2 | 2048 × 2732 |
| Laptop (common) | 1366 × 768 / 1536 × 864 | 1 / 1.25 | 1366 × 768 / 1920 × 1080 |
| Desktop monitor | 1920 × 1080 | 1 | 1920 × 1080 |
The viewport is the area the web page can use, measured in CSS pixels. Browser toolbars take some of the height, so the visible height on a real phone is usually a little shorter than the figure above. Laptop viewports depend on the operating system's display scaling: a 1920 × 1080 screen at 125% scaling gives a 1536 × 864 viewport.
Responsive checklist
- Viewport meta tag: the page needs
<meta name="viewport" content="width=device-width, initial-scale=1">, or phones render it at about 980 px wide and shrink it. - No sideways scrolling at 320 or 360 px. Give images
max-width:100%, wrap wide tables in a scrolling container and let long words or URLs break withoverflow-wrap:anywhere. - Tap targets at least about 44 × 44 px with space between them, and body text of at least 16 px so iOS does not zoom form fields.
- Navigation that collapses cleanly into a menu, with nothing hidden behind a fixed header.
- Landscape on phones: fixed headers and full-height sections (
100vh) often leave little room; consider100dvh. - Breakpoints from content, not devices: widen the frame slowly with custom widths and add a breakpoint where the layout starts to look wrong.
Why some sites cannot be previewed
Any responsive checker that shows live pages works with frames, and site owners can forbid framing. A site that sends X-Frame-Options: DENY or SAMEORIGIN, or Content-Security-Policy: frame-ancestors 'self', will show a blank or "refused to connect" frame here. If it is your own site and you want to test it in frames, allow it temporarily on a staging copy, or use the device toolbar in Chrome, Edge or Firefox developer tools (Ctrl+Shift+M or Cmd+Shift+M), which uses the same viewport sizes.
Frequently asked questions
Why does a website show a blank frame or 'refused to connect'?
The site forbids being displayed inside a frame on another site by sending the X-Frame-Options header or a Content-Security-Policy frame-ancestors rule. It is a security setting against clickjacking and is common on Google, social networks, banks and many web apps. It is not a responsive bug. Open the page in a new tab and use your browser's device mode (F12, then the phone icon) instead.
Is this the same as testing on a real phone?
The layout is the same: each frame has the exact CSS viewport width and height of the device, so CSS media queries, flexbox and grid behave as on the phone. What it does not emulate is the device's user agent string, pixel density, touch-only input and browser toolbars. Sites that detect phones from the user agent may still send their desktop version, so check important pages on a real device too.
What screen sizes should I test?
Cover the narrowest common phone (360 or 375 px wide), a large phone (about 430 px), a tablet in portrait (768 to 834 px) and landscape (1024 to 1180 px), a laptop (1280 to 1440 px) and a desktop (1920 px). Problems usually appear just below and above each breakpoint in your CSS, so also try widths a few pixels either side of them.
Why are the sizes smaller than the phone's resolution?
Phones have high-density screens: an iPhone 15 has 1179 × 2556 physical pixels but reports 393 × 852 CSS pixels with a device pixel ratio of 3. Web pages are laid out in CSS pixels, so those are the sizes that matter for responsive design, and they are the ones listed here.
Can I test my local or staging site?
Yes, as long as your own browser can open it. The frames load directly from your computer, so http://localhost or an intranet address works when you open the page over http. Browsers block http:// pages inside an https:// page, so for localhost you may need to run the dev server over https, or use Open in new tab.
Does the tool collect the sites I check?
No. The page you enter is loaded by your own browser inside the frames, exactly as if you visited it. Nothing is sent to our servers, and the last URL and size are only stored in your browser so the tool can restore them next time.
Why does the page show a horizontal scroll warning?
For pages on this same website, the tool can measure the content and warns when it is wider than the screen, the most common mobile layout bug. It is usually caused by a fixed-width element, a wide image or table, or long unbroken text. For other sites the browser does not allow that measurement, so look for a sideways scrollbar inside the frame.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.