# Responsive viewer

> Preview a website at phone, tablet, foldable and desktop sizes. Compare layouts, drag devices, adjust scale and capture references with Sitepeel.

Canonical page: https://sitepeel.dev/responsive-website-viewer/

Compare your website at different CSS viewport sizes with Sitepeel’s responsive viewer. Arrange device previews, inspect the awkward widths and capture the result. New in 1.0.3.

Updated: 2026-09-26

## Highlights

- Phone, tablet & desktop presets
- Drag devices on a free canvas
- Scale, rotate & compare

## How to use it

1. **Open Responsive viewer** Choose Responsive viewer from Sitepeel tools. In this website demo, preview a public Sitepeel page.
2. **Choose your viewports** Change the device from its header, add another preset or enter custom dimensions. Compare a few useful sizes first.
3. **Inspect and capture** Check content wrapping and spacing, adjust scale, and capture a reference for the next fix.

## A workspace for comparing layouts

Use phone, tablet, laptop, desktop and foldable presets, or set a custom CSS width and height. Switch to a different device from its name dropdown. Expand a device’s controls when you need rotation, scale or capture, then collapse them to focus on the page.

Arrange previews in a grid, row, stack or free canvas. Drag device headers to place them freely, fit previews to the available space and use a scale slider for closer inspection.

- [Follow the responsive website testing checklist](https://sitepeel.dev/guides/test-responsive-website-layouts/index.md)

## Compare the same details across widths

Synchronized scrolling helps you compare corresponding sections. Optional click synchronization, grid and ruler overlays, labels and reference-image overlays support more focused reviews. Capture a device preview or the set when you need to share the result.

Device mockups add a visual frame and optional status and browser controls. Their appearance can help communicate a reference; the usable page dimensions remain the important measurement. Some model artwork and browser controls are approximations.

## Foldable layouts and custom breakpoints

Supported foldable presets offer open/closed or single/dual modes to compare different layout space. Add custom dimensions near a breakpoint to check the widths between familiar devices.

These previews resize the page. They do not emulate device operating systems, physical hinges, touch hardware or viewport-segment APIs. Test those behaviors on appropriate hardware and developer tools.

## Know what a browser preview can tell you

The viewer uses your current browser engine. An iPhone frame in Chrome does not run Safari. Use the preview to find layout issues, then verify browser-specific behavior, mobile keyboards, touch and performance on real devices.

Some websites block embedded previews. Open those pages in a regular tab and use browser developer tools. The website demo previews Sitepeel public pages; install the extension to use the viewer with other websites.

- [Check 1.0.3 features and store availability](https://sitepeel.dev/guides/sitepeel-1-0-3/index.md)
- [Turn a preview capture into a design handoff](https://sitepeel.dev/guides/edit-annotate-website-screenshots/index.md)

## Questions and answers

### Is this a real-device emulator?

No. It renders CSS viewports in your current browser, with optional visual device frames. Verify operating-system and browser-specific behavior separately.

### Can I move the devices freely?

Yes. Select Free canvas and drag a device header. Use its controls or the global scale slider to adjust how much space the preview occupies.

### Can I try another website in the online demo?

The demo is restricted to public Sitepeel pages. Use the installed extension to preview other websites; some sites may block embedded previews.

## Related pages

- [Test responsive layouts](https://sitepeel.dev/guides/test-responsive-website-layouts/index.md): Compare mobile, tablet and desktop layouts with Sitepeel. Test breakpoints, foldable widths, navigation and long content, then verify on real devices.
- [Customize your tools](https://sitepeel.dev/guides/customize-sitepeel-tools/index.md): Choose a dock or sidebar, rearrange Sitepeel tools, set screenshot defaults and find AI settings in the Sitepeel 1.0.3 dashboard.
- [Website screenshot tool](https://sitepeel.dev/website-screenshot/index.md): Capture a full page, visible area, snip or element. Crop, annotate, frame and export website screenshots with the Sitepeel 1.0.3 capture editor.