Clone this wiki locally
Click “Live view” on top bar to see results. New browser window opens, you can resize it to see responsiveness of content. If you keep “Live view” window open, all changes applied to document in design mode are instantly reflected in live view window.
Responsive design testing tools
Responsive website adjust its layout to different screen sizes by application of CSS rules with media queries.
Viewport resizer is a tool to test your project responsiveness. You can switch between:
- smartphone portrait
- smartphone landscape
- tablet portrait
- fit to screen
If you design for flexibility, use the viewport meta tag in your <head>. It sets cross-device layout:
<meta name="viewport" content="initial-scale=1">
Play and Pause / Prevent and Handle
Using Pause Mode (default) all scripts are off. In this mode, you can click "+" (top menu) to expand all hidden areas and "-" (element frame) to hide element again. In Play Mode all scripts are on and you have two additional options: Prevent and Handle. You can toggle between Play and Pause with pause and play button below work area.