Emulate devices with the new Visual Editor
The Visual Editor includes a device emulation feature that lets you preview and edit your website at different device viewport sizes, mobile, tablet, and custom dimensions, directly within the editor.
Device emulation displays your site at the selected device dimensions while keeping all editor controls (toolbar, panels, highlighter) at full desktop size. This means you can comfortably make changes to a mobile or tablet layout without the editing interface shrinking.
Device emulation changes the viewport size only; it does not change the browser's user agent string. How your site responds depends on how it is built:
- Responsive sites adapt their layout automatically using Cascading Style Sheets (CSS) media queries. For these sites, the emulated view reflects how the page actually appears on a mobile or tablet device.
- Adaptive sites serve different content or layouts based on the detected user agent (for example, serving a separate mobile page). The user agent remains as desktop. These sites may not display their mobile-specific layout or elements in the emulated view. In this case, you may need to manually add mobile-specific elements to your variation.
You can use device emulation to preview and make changes to your site at mobile or tablet dimensions without relying on a Chrome extension or a responsive site layout. This is particularly useful when targeting experiments to specific audience conditions based on device type.
Use device emulation
The following steps describe how to use device emulation in the Visual Editor. For information about how to create an experiment and open the Visual Editor, see Steps to create an experiment and New Visual Editor.
Click Emulate to open the emulate window.
Your site displays in a centered preview card at the selected device dimensions. The original desktop site displays blurred in the background for context. The top bar displays with device controls (Responsive drop-down list, dimension inputs, and view mode tabs).
The site re-renders in its layout for the selected viewport size.
Initially the window loads with a custom dimension window. The editable width and height text fields let you enter arbitrary pixel dimensions. These display in the top bar as [width] x [height].
A zoom drop-down list includes a Fit to window mode that auto-scales the emulated viewport, so it is fully visible within the editor canvas. Additional zoom levels are available for manual control.
Click the Responsive drop-down list to view predefined device profiles with their resolutions. Presets use standard device model names (for example, iPhone SE rather than iPhone SE 3rd Generation) because the viewport dimensions are consistent across generations of each model.
Select a preset to resize the preview to that device's exact dimensions. The site re-renders accordingly.
Click Rotate viewport to change the orientation of the emulated device.
The Load Mode button lets you manually override which loading strategy the emulator uses, rather than relying on the automatic default detection. The following options are available:
- Default – Try the native page load first, then fall back to srcdoc if needed.
- URL – Load the page directly by URL in the iframe.
- Srcdoc – Render the captured snapshot HTML inside the iframe srcdoc.
Click Re-snapshot page to capture the current page again and update the Visual Editor view.
You can interact with the emulated site the same way as in desktop mode. Learn how to Edit elements with the new Visual Editor.