Three ways to capture a website as it looks on a phone: record the phone itself, emulate a phone in Chrome DevTools, or render the page at phone width from its URL.
Aviral LakhanpaulUpdated 3 min read
Load the page at phone width so the site serves its real mobile layout, then capture that. You can record an actual phone’s screen, emulate a phone with Chrome DevTools’ device toolbar and record the window, or give the URL to a tool that reads the page at phone width and exports a 9:16 or 4:5 video directly. Never shrink a desktop recording: that is a small desktop page, not the mobile site.
A responsive site decides its layout from the width of the window it is in. At desktop width you get the desktop layout, whatever shape you crop the video to afterwards. To get the menu button, the stacked columns and the larger tap targets of the mobile site, the page itself has to be loaded at a phone’s width. Everything below is a different way of doing that.
| Method | Good for | Watch out for |
|---|---|---|
| Record the phone’s own screen | Real touch interaction, real device | Status bar and notifications in shot, a finger-flicked scroll |
| Chrome DevTools device toolbar | Pages on localhost or behind a login | Recording a small window, scroll by hand or script |
| Render the URL at phone width | Public pages, a clean even scroll | Cannot reach private pages |
iPhone and Android both have a built-in screen recorder in their quick settings. It captures the real device, which is honest, and the scroll, which is the problem: a thumb flicks and coasts, and every flick looks different.
Open DevTools, switch on the device toolbar (⇧ ⌘ M on a Mac, Ctrl Shift M on Windows) and pick a phone from the list. The page reloads at that width with a touch-style user agent, and serves its mobile layout. Record just that viewport with a screen recorder and let a script do the scrolling; the auto-scroll guide has one.
Set the zoom in the device toolbar to 100% before recording, or the recorder captures a scaled-down copy and the text goes soft.
Paste the address on the home page and choose Mobile, or Tablet, at the top of the video settings. The page is loaded at that width on our servers, so the site answers with the layout it actually serves there, and the shapes that suit a phone become available: 9:16, 4:5 and 1:1.
A rendered or recorded mobile video is the screen alone. To show it inside an iPhone or a Pixel, drop the video onto a device in a mockup app or a video editor’s template. Export at 9:16 so it fills the device screen without bars.
Paste a link and preview the scroll for free. 51 free credits when you sign up, no card, and no watermark on anything you export.
Use Chrome DevTools’ device toolbar to load the page at a phone’s width, then record that viewport. Or paste the URL into a tool that reads the page at phone width and exports the video directly.
Because the page was loaded at desktop width and then cropped or scaled. The layout is chosen by the window width, so the page has to be loaded at phone width to show the mobile site.
9:16 to fill a phone screen, as in Reels, TikTok and stories. 4:5 for a feed post. 1:1 if it might be shown in either.
Automate website recordings with customizable motion, smart controls, and export options designed for modern creators.
