Aside from the default Responsive Mode, Sizzy offers several other View Modes that you can use to change how devices are arranged. The icons for the different view modes can be found on the right side of the Workspace Toolbar.
Here's an explanation of what the different view modes offer.
To use the hotkeys listed below, the focus must be anywhere on the app UI except the active webpage. In case a hotkey doesn't activate a mode, click somewhere outside the webpage, and try pressing the hotkey again.
This mode lets you see multiple devices at once, set , and switch layouts. To learn how to change the alignment of devices in responsive mode see .
This mode makes Sizzy behave like a regular web browser that you can use for general testing with the added developer features that the app offers. One suggested workflow is to do most of your testing in Full Mode and go back to Responsive Mode or Resizable Mode for testing on multiple devices.
To enable this mode, click the Full Mode icon in the toolbar.
This is a way to quickly check how your website looks in different screen sizes and aspect ratios without using . Click the Resizable Mode button in the toolbar to access it.
To manipulate the size and aspect ratio of the viewport, click and drag the bars on the right and bottom edges of the browser window.
Lets you choose one particular device to focus on and hides all the other devices in your workspace. To learn more, see .
This mode declutters the interface by hiding all of Sizzy's UI elements such as the toolbar, bottom bar, and debugging panel. To learn more, see .
In addition to using the toolbar and keyboard shortcuts, you can switch between modes by using Butler. To invoke Butler, press Ctrl+Shift+P on Windows/Linux, or Cmd+Shift+P on macOS.
In the search bar that pops up, write view to see all available view modes.