Viewports & devices

Add, arrange, and shape the device frames you preview your page in.

Adding viewports

A viewport is a single device frame on the canvas. Each one loads your page at a specific width and height, so you can watch several screen sizes respond at once. To create one, use the add-viewport control in the toolbar. From there you can pick a ready-made device preset or enter a custom size of your own.

The first time you open Responsive Tester on a page, three default frames appear so you have something to work with straight away:

Phone at 390x844
Tablet at 768x1024
Desktop at 1280x800

Add as many frames as you need on top of these, and remove any you don't want. Everything on this page is free, with no feature locked behind an upgrade.

Device presets

Presets save you from remembering exact dimensions. They are grouped by device family so you can jump to the one you want quickly. Picking a preset adds a frame at that family's real logical resolution, not its physical pixel count.

iPhone

iPhone 17 Pro: 402x874
iPhone 17 Pro Max: 440x956
iPhone 16: 393x852
iPhone 16 Plus: 430x932
iPhone 12-15: 390x844
iPhone SE: 375x667

Samsung Galaxy

Galaxy S24/S25: 360x780
Galaxy S25 Ultra: 412x883

Google Pixel

Pixel 9: 412x915
Pixel 9 Pro XL: 448x997

Generic Android

Android Compact: 360x800
Android Large: 412x915

iPad

iPad mini: 768x1024
iPad Air 11 inch: 820x1180
iPad Pro 11 inch: 834x1194
iPad Pro 13 inch: 1024x1366

Android Tablet

Galaxy Tab S: 800x1280

Desktop

Laptop 1366x768: 1366x768
Laptop 1440x900: 1440x900
Laptop 1536x864: 1536x864
Desktop 1920x1080: 1920x1080
Desktop 2560x1440: 2560x1440
Desktop 4K: 3840x2160

Custom sizes

When no preset matches the breakpoint you care about, enter a custom size instead. Type any width and height, and a frame appears at exactly those dimensions. This is the fastest way to check a specific breakpoint from your stylesheet, a container query boundary, or an odd screen you support in the field.

The smallest custom frame you can create is 200 wide by 300 tall. Values below that minimum are clamped up, since a frame narrower or shorter than that leaves no room to render or interact with the page.

Row vs grid

The layout toggle switches every frame between two arrangements at once:

Row lines all frames up side by side in a single horizontal strip that scrolls. This keeps frames at full height and is handy when you want to scan across sizes in one direction.
Grid wraps the frames onto multiple rows so they fill the available space. This suits a larger set of frames, where a single row would run off the edge of the canvas.

The toggle applies to the whole canvas, so you never have to arrange frames one at a time.

Zoom

The zoom slider scales every frame together. Drag it down to shrink all frames at once so more of them fit on screen, which is useful when you want an overview of several sizes side by side. Zoom changes only the on-screen scale of the frames, not the resolution the page renders at, so a phone frame still reports its true width to the page while you view it smaller.

Rotate

Rotate flips any single frame between portrait and landscape. This swaps the frame's width and height, letting you confirm that layouts, media queries, and navigation hold up when a device turns on its side. Each frame rotates independently, so you can hold one device in landscape while the rest stay upright.

Resize

Drag a frame's edges to resize it by hand. This lets you test the widths that sit between the fixed preset sizes, which is where responsive layouts most often break. Sweep an edge slowly through a breakpoint to watch the moment a layout reflows, columns collapse, or a menu switches to its mobile form.

Reorder, expand, and remove

Once you have a set of frames, three controls help you manage them:

Reorder moves a frame earlier or later using its chevron controls, so you can group related sizes together or sort from smallest to largest.
Expand blows one frame up to fill the whole canvas and hides the others, giving you a focused, roomy view of a single size. Collapse it again to bring the rest back.
Remove deletes a frame with its close control. A confirmation appears first so you don't lose a frame by accident.

Every frame always shows the same page. When you follow a link or navigate inside one frame, all of the frames navigate to that page together, so the whole set stays in step as you move through your site. There is nothing to switch on, and no way to let frames drift onto different pages. This behaviour is always on and free.