Responsive design tester

Q: Can I test a page at its own breakpoints?

Yes. In Responsive Mode, press 5 or choose Breakpoints to replace your viewports with one frame per min-width or max-width value in the page's media queries.

Preview any page at phone, tablet and desktop sizes side by side in one tab, with real media queries firing in every frame and your inspection tools still working.

What it does

Responsive Mode replaces the page with a canvas of viewports, each one showing the same page at its own size. A fresh setup opens with three frames: Phone at 390 × 844, Tablet at 768 × 1024 and Desktop at 1280 × 800.

Every frame is the real page loaded in its own frame at that width, so the page's CSS @media rules apply per frame and scripts that check window.matchMedia() get the frame's own size. You see the mobile menu, the tablet grid and the desktop layout at the same time instead of dragging a window back and forth.

How to test a page at different screen sizes

Open the page and start Screen Ruler by clicking its toolbar icon or pressing Alt + Shift + S (Option on a Mac).
Press 9 or choose Responsive Mode in the control bar at the bottom of the page.
Use Add Viewport to add a device preset or a Custom size with your own Width and Height.
Scroll any frame. With Sync Scrolling on, the other frames follow so the same section stays in view at every width.
Press 9 again to leave. The page reloads to its normal view.

Viewports and the canvas

The device presets use each device's CSS viewport size, not its physical pixel resolution. They cover recent iPhones from iPhone SE to iPhone 17 Pro Max, Samsung Galaxy and Google Pixel phones, generic Android sizes, iPad mini, iPad Air and iPad Pro, Galaxy Tab S, and common laptop and desktop sizes up to 4K.

Each frame has its own header where you can:

Rotate it to swap width and height.
Set its Color Scheme to light or dark, independently of the other frames, to check prefers-color-scheme styles.
Refresh it, Move Left or Move Right, or Remove Viewport.
Drag its edge to resize it to any size up to 3840 pixels.

A frame whose content is wider than its viewport shows a Content overflows horizontally warning, which catches the classic stray element that causes sideways scrolling on phones.

The toolbar above the canvas controls the whole set. Zoom scales the canvas from 25% to 200% so more frames fit on screen. It is a visual scale only, so media queries still see each frame's real width. Frame Layout wraps frames onto several rows, and Reset Viewports returns to the default three.

Breakpoints mode

Instead of picking sizes yourself, press 5 or choose Breakpoints while in Responsive Mode. Screen Ruler reads the min-width and max-width values from the page's media queries and builds one frame per breakpoint, so every layout the CSS defines is on screen at once. Each frame borrows its height from your closest viewport, or uses 800 pixels. Turn it off and your own viewports come back unchanged. To see the same breakpoints as guide lines on the normal page, use the breakpoint detector.

Tools keep working inside the frames

Hover to inspect elements, measure distances and sample colors in any frame. With Studio, CSS you change with the live editor shows up in every frame at once, so you can fix a layout at one width and check it did not break the others.

Limits

Screen size, not full device emulation. Frames change the viewport width and height. They do not change the user agent, simulate touch input or change the device pixel ratio.
Some sites refuse to be framed. Pages sent with X-Frame-Options or a frame-ancestors policy show a message with a Grant access link. Approve the browser prompt and Screen Ruler removes those headers for the preview frames in that tab only, until you leave Responsive Mode. Sites that block framing with their own scripts still cannot be shown.
Technology detection is unavailable while Responsive Mode is on.

Who it is for

Designers checking that a build matches mobile, tablet and desktop mockups, developers hunting layout bugs at awkward in-between widths, and anyone reviewing a client or competitor site on several devices without owning them. The page measurement docs cover the canvas in more detail, and the responsive testing extension roundup compares other options.

Preview Responsive Sizes is part of Screen Ruler's Inspect and Studio plans, and every install starts with a free 7-day trial with everything unlocked, no card needed.

Common questions

How is this different from device mode in Chrome DevTools?

DevTools device mode shows one viewport at a time and can emulate a device's user agent and touch input. Screen Ruler shows several viewports side by side on one canvas, with synced scrolling and a breakpoints mode, so you can compare layouts at once. It changes the viewport size only, so use DevTools when you need user agent or touch emulation.

Are the device sizes accurate?

The presets use each device's CSS viewport size, the width and height a page sees in the browser, which is what media queries respond to. Physical screen resolution is higher on most phones because of the device pixel ratio, and that is not emulated.

Why does a site show a message instead of the page?

Some sites tell the browser not to show them inside a frame. Click Grant access and approve the prompt, and Screen Ruler removes those headers for the preview frames in that tab while Responsive Mode is on. A few sites block framing with scripts, and those cannot be previewed this way.

Can I test a page at its own breakpoints?

Yes. In Responsive Mode, press 5 or choose Breakpoints to replace your viewports with one frame per min-width or max-width value in the page's media queries.