Responsive view

The responsive view shows the current page at three widths side by side: a phone, a tablet and a laptop. You can check a layout at every size at once, without resizing the window or opening developer tools.

Turn it on or off with ⌥⌘R (View → Responsive View), or from the command palette.

What stays in sync

• Width. Each pane lays the page out as a screen that wide would, media queries included. All three are drawn at the same scale, so their sizes compare honestly. A pane's header gives its width.
• Scrolling. Scroll in any pane and the others follow, to the same point of the way down the page. Because layouts differ in length, that's the same proportion of the page, not always the same element.
• Navigation. Follow a link, go back or type an address in any pane, and the others go there too. ⌘R reloads all three.

Good to know

• The Desktop pane is the tab itself; the phone and tablet panes are extra pages that exist only while the view is on. Turning it off, switching tabs or closing the tab removes them and frees their memory.
• Only the width changes. The panes don't pretend to be a phone or tablet: they send Litr's usual user agent and have no touch input, so sites that pick a mobile version on the server may still show their desktop version.
• Zoom (⌘+, ⌘−) is off while the view is on, since each pane is zoomed to fit its width. The tab's own zoom comes back when you leave.
• Scroll sync follows the page itself. Pages that scroll inside a panel of their own, rather than the whole page, don't sync.
• The view pairs well with developer tabs: with Reload when files change on, saving a file reloads all three widths.