Viewport extension

Viewport basics

Click the extension icon on any page and it opens in a viewport tab: the site in a resizable frame, with a toolbar for widths, navigation, and tools. Because it's a real frame at a real width, the site's media queries fire exactly as they would on a device.

Device widths

• Desktop (full width), Tablet (768px), Mobile (390px): the three buttons in the toolbar, or keys 1 / 2 / 3.
• Drag the right-edge grip to resize freely. In Desktop the width fills the pane; in Tablet and Mobile it resizes device-fit with side padding.
• Lock (L, desktop only): pin a fixed width that fills the pane.
• Width field: type an exact value, or drag left and right on the number to scrub it.

Navigating the framed site

• Back / forward / reload (R) work on the framed site, and the address bar tracks page changes: full loads, SPA pushState navigation, and hash routing.
• Address bar: type any URL and hit Enter to load it in the frame.
• Page search: clicking the address bar also opens a search over the site's discovered pages: type to filter, ↑/↓ and Enter to open one. (More on discovery in Pages & sitemap.)