Record professional mobile app demos directly from your desktop using Chrome's responsive design mode. No phone screen mirroring needed.
Recording a mobile app demo usually means awkward phone screen mirroring, shaky camera angles, or expensive hardware setups. But if your app has a web version or responsive design, Chrome DevTools' device mode lets you record a perfect mobile demo right from your desktop — complete with auto-zoom on small mobile UI elements.
Follow these steps for the best results.
Open your web app in Chrome, press F12 to open DevTools, and click the device toggle icon (or press Ctrl+Shift+M). Select a device like iPhone 14 or Pixel 7 from the dropdown. This renders your app at the exact dimensions and pixel density of a real mobile device.
Pick a device that matches your target audience. For iOS apps, choose iPhone 14 or iPhone SE. For Android, use Pixel 7. Avoid exotic devices — stick with popular models viewers will recognize. Adjust the zoom in DevTools so the mobile viewport fills a comfortable portion of your screen.
Start Zumie and choose tab recording mode. The mobile viewport rendered by DevTools will be captured along with the device frame. Navigate through your app naturally, tapping buttons and scrolling content as a real user would.
Mobile interfaces are dense — small buttons, compact menus, and tiny text. Zumie's auto-zoom is essential here. When you click on a mobile element, the zoom magnifies that area, making it visible even on a desktop-sized recording. This solves the biggest problem with mobile demos.
After recording, Zumie exports at your recording resolution. The mobile viewport within the tab will be sharp and clear. Share via Zumie's link for instant viewing, or download for embedding in your app store listing or website.
Level up your results with these expert techniques.
In DevTools, make sure touch simulation is enabled (it usually is by default in device mode). This shows a circular touch indicator when you click, making the recording feel more like an actual mobile interaction rather than a desktop cursor.
Don't use a viewport that's too wide or too narrow. Stick to standard device presets in DevTools. If your app looks best on a specific device, bookmark that configuration so you can quickly switch to it for future recordings.
If your app supports both orientations, record separate demos for each. Switching orientation mid-recording can be jarring and confusing for viewers. Short, focused demos per orientation work much better.
DevTools lets you set device pixel ratio (DPR). If you leave it at 1x for a device that normally runs at 3x, your app will render differently than on a real phone. Use the correct DPR for your target device to get accurate results.
Make sure you're recording just the tab with Zumie, not your full screen. Full-screen recording would show DevTools panels, your browser toolbar, and other UI that distracts from the mobile demo.
Real mobile users are often on slower connections. If your demo relies on fast loading, viewers on actual phones may have a different experience. Consider enabling DevTools network throttling to simulate realistic conditions.
Watch how Zumie's auto-zoom and click highlights transform a basic screen recording into a polished, professional video.
This method works for web apps and progressive web apps (PWAs) rendered in Chrome's responsive mode. For native iOS or Android apps, you'd need a device emulator or physical device with screen mirroring.
Yes. DevTools renders your app at the exact pixel dimensions and density of the selected device. With the device frame enabled, it even shows the phone outline. Viewers will see what looks like a real mobile screen.
iPhone 14 Pro for iOS demos and Pixel 7 for Android demos are safe choices. They're popular, current devices with standard viewport sizes. Avoid very old or unusual devices unless your app specifically targets them.
Install Zumie for free and create your first professional recording in minutes. No signup, no credit card, no commitment.