Responsive Tester

Preview a website at a chosen device width

URL

Device

Pick one device — selecting it replaces the previous choice.

iPhone SE 375×667

Some sites send an X-Frame-Options or Content-Security-Policy: frame-ancestors header that blocks embedding — if a frame is blank, that is the site refusing to be framed, not a bug here.

About

Preview a website at common device widths — phones, tablets, and desktops — to check responsive layouts. Enter a URL, pick one or more device presets, and view the site at each width. Everything runs in your browser; the URL loads directly into sandboxed iframes.

    Examples

    Test a landing page at mobile and desktop

    Input
    url: https://example.com
    devices: iPhone SE (375px), Desktop (1920px)
    Output
    [iPhone SE iframe at 375px width]
    [Desktop iframe at 1920px width]

    Both previews load simultaneously. Scroll horizontally or resize to compare the layout side by side.

    Spot a layout issue at the tablet breakpoint

    Input
    url: https://example.com
    custom width: 768px
    Output
    [iframe at 768px width]

    A custom width of 768px tests the tablet breakpoint where many sites switch from a single-column to a multi-column layout.

    About this tool

    The Responsive Tester previews any URL at phone, tablet, and desktop widths in a single view so you can check how a page adapts to different viewport sizes. It uses sandboxed iframes — one per device preset — loaded directly in your browser. The URL is never sent to this tool's server; it is loaded straight into the iframe on your device.

    Eight device presets are available (iPhone SE, iPhone 14, Pixel 7, iPad, iPad Pro, Laptop, Desktop, Wide) with their correct pixel widths. A custom width input lets you test any breakpoint you define in your CSS.

    How to use

    1. Enter a URL

      Type or paste the URL you want to test. Note: some sites send X-Frame-Options or CSP frame-ancestors headers that block embedding — a blank frame indicates the site is blocking the iframe, not a bug in this tool.

    2. Select devices

      Choose one or more device presets from the list. Each selected device renders the URL in its correct pixel width inside a sandboxed iframe.

    3. Inspect the previews

      Scroll through the device previews and note where the layout breaks. Click any device to open it in a full-size window for detailed inspection.

    Use cases

    Checking a landing page across devices

    Open a shared staging URL in all device presets simultaneously to confirm the hero, navigation, and CTAs render correctly at every common viewport.

    Testing responsive CSS breakpoints

    Use the custom width input to test specific breakpoints (e.g. 480px, 768px, 1024px) where your layout changes.

    Verifying a web app's mobile navigation

    Load a web app at phone width to check whether the hamburger menu works correctly on small screens.

    Common mistakes

    Mistake:Assuming a blank iframe means the tool is broken.

    Fix:Many sites send X-Frame-Options: SAMEORIGIN or CSP frame-ancestors directives that block all iframe embedding. A blank frame is the expected result for those sites, not an error in this tool.

    Mistake:Testing at one width and assuming it works everywhere.

    Fix:Mobile devices also have different pixel densities (2x, 3x). A page that looks good on a standard-density iPhone SE may look wrong on a high-density iPhone 14 Pro due to viewport scaling.

    Mistake:Not clearing the browser cache while testing.

    Fix:A responsive layout issue may be masked by cached CSS. Hard-reload (Cmd+Shift+R) each iframe to load the latest stylesheet before concluding the layout is correct.

    Frequently asked questions

    References & standards