Skip to content We're live on Product Hunt today Upvote
install

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more Chromium browsers: Arc, Vivaldi, Chromium, Opera GX the Chrome build

tool · one of 34 free, no counter

Viewport

What does this page do at a phone width, right now?

Every responsive preview that scales the page with a CSS transform is lying: media queries resolve against the real viewport, so a transformed 1440px page at 30% is a desktop layout drawn small. These are real iframes at real widths, which is the only arrangement where a breakpoint answers the way it will answer on the device.

Reach it Press ⌘ + K on any tab and type viewport. Ctrl + K on Windows and Linux

The same page at real device widths, side by side
reads the current address
writes nothing to the page
sends nothing
widths CSS pixels, never hardware pixels
scaling height only - width is genuine
mirroring clicks by selector, scroll as a ratio
plan free
Add   LoupeKit - opens the list of browsers it can be installed in

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more Chromium browsers: Arc, Vivaldi, Chromium, Opera GX the Chrome build

in the panel · free, no counter

section#about

What this actually is

When a layout has to be checked at several widths at once, and any time a scaled preview has told you something you could not reproduce on a phone. Not a substitute for a real device on anything touch-dependent.

section#asked

Asked about this tool

Why is the frame not scaled to fit?

Because scaling the width is what makes a preview lie. The height is scaled and the width is not, so every media query in the document resolves against the number written on the frame.

Do clicks in one frame really happen in the others?

Yes, and they travel as a selector rather than as coordinates - the same button is at a different place in each frame, which is the entire reason to have several open.

Can it preview a page that refuses to be framed?

No. A site sending X-Frame-Options: DENY or a restrictive frame-ancestors cannot be put in an iframe by anything, and the frame says so rather than showing an empty box.

Why are the device widths not the numbers on the spec sheet?

Because a phone advertised at 1170 pixels reports 390 to CSS. The presets are CSS pixels throughout, which is the number a media query is written against.

how to use viewport

  1. Open Viewport and pick the widths you want beside each other.
  2. These are real iframes at real CSS pixel widths, so breakpoints resolve as a visitor gets them.
  3. Click in one frame and the others mirror by selector; scrolling mirrors as a ratio.
  4. Only the height is scaled. The width is genuine, which is what a transformed preview cannot claim.

written about at length

Add   LoupeKit - opens the list of browsers it can be installed in

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more Chromium browsers: Arc, Vivaldi, Chromium, Opera GX the Chrome build

70 of these · no host permissions · three free audits