Responsive canvas

The responsive canvas shows the page at several viewport sizes side by side, each in a frame of exactly that size, so you can see every layout at once instead of dragging the window. It opens over the page, in the same tab.

1. With Nitpique on, press the Breakpoints button on the toolbar and choose Responsive canvas. The page appears in a phone, a tablet and a laptop frame.
2. Add a frame from the presets (phone, large phone, tablet, laptop, desktop), or at one of the page's breakpoints: the widths on each side of every width its media queries switch at (767 and 768 for min-width: 768px). Each layout replaces the frames with one for every layout the breakpoints make.
3. Type a frame's width and height, or press the arrows beside the width to step it to the next breakpoint either way. The cross removes a frame. Your set of frames is remembered.
4. Fit scales every frame by the same amount so the row fits the window; 50%, 75% and 100% show them at that size instead, and the row scrolls sideways. With Scroll together on, scrolling one frame scrolls the others to the same share of their page.
5. Press Esc or the cross at the top right to close it.

Pages that refuse to be framed

Many sites refuse to be shown in a frame, even by their own pages, and then a frame shows only a note saying so. The canvas then offers Allow on all sites. Nitpique asks once: after that, every page shows in the canvas.

To show such a page, Nitpique removes its X-Frame-Options and Content-Security-Policy headers, only for frames in the tab the canvas is open in, and only while it is open. Pages in your other tabs, and this one once the canvas closes, are never changed. Take the permission back at any time in the browser's extension settings.