Mobile Demos

Create demos with mobile device frames, responsive captures, and touch-optimized interactions.

Mobile demos let you showcase mobile apps or responsive web experiences inside realistic device frames.

Capturing mobile screens

From a browser

Open Chrome DevTools and enable device emulation (Ctrl/Cmd + Shift + M).
Select a device preset (e.g., iPhone 15, Pixel 8) or set custom dimensions.
Navigate to your product and start capturing with the Demoship extension as usual.

The extension detects the emulated viewport size and automatically applies the appropriate device frame.

From screenshots

Take screenshots on a physical device or emulator.
In the editor, click Add Step > Upload Image.
Upload your mobile screenshots.
Select a device frame from the Device Frame dropdown in step settings.

Supported device frames

iPhone (14, 15, 16 series)
iPad (standard and Pro)
Android phones (Pixel, Samsung Galaxy)
Android tablets
Custom dimensions with generic frame

Device frame settings

For each step, configure:

Device model -- Determines the frame shape, notch style, and corners.
Orientation -- Portrait or landscape.
Show status bar -- Toggle the simulated status bar (time, battery, signal).
Background color -- The color behind the device frame.

Touch interactions

Mobile demos automatically adapt hotspot behavior:

Hotspot targets are enlarged for touch-sized tap areas.
Swipe gestures can be simulated by adding a hotspot with a Swipe action type.
Scroll indicators help viewers understand when content extends below the visible area.

Responsive preview

Before publishing, use the Preview panel to test your demo at different viewport sizes. This helps verify that hotspots remain correctly positioned across devices.

Note: If your product is a responsive web app, consider capturing both desktop and mobile versions as separate demos and linking them from a shared Demo Center.