How to take a mobile screenshot of a website on desktop

Capture a phone-sized screenshot of any web page from desktop Chrome: visible area or full page, with or without a device frame.

The quickest way to take a mobile screenshot of a website on a desktop is to open the page in a mobile view, then capture it: in Chrome DevTools device mode, use Capture screenshot or Capture full size screenshot from the device toolbar menu; in a mobile view extension, use its screenshot button. Both produce an image of the page as a phone renders it, without touching a phone.

Which method you pick depends on whether you need the visible screen or the whole page, and whether the image should include a phone frame.

Visible area or full page?

Decide this first, because the tools differ.

A viewport screenshot shows what a person sees on the phone screen without scrolling. Use it for bug reports (“the button is hidden behind the cookie bar”), app-store style marketing images, and design reviews of the first screen.

A full-page screenshot stitches the entire scrollable page into one tall image. Use it for content reviews, sign-off on a landing page, or archiving a page before a redesign. Be aware that sticky headers, lazy-loaded images and scroll-triggered animations can look odd in full-page captures, because the browser renders the whole page at once.

Method 1: Chrome DevTools device mode

Open DevTools (F12) and toggle the device toolbar (Ctrl + Shift + M, or Cmd + Shift + M on a Mac).
Pick a device and reload the page.
Open the three-dot menu at the top right of the device toolbar.
Choose Capture screenshot for the viewport or Capture full size screenshot for the whole page.

To include the phone outline, choose a named device and enable Show device frame in the same menu before capturing. Chrome saves a PNG to your downloads folder.

You can also run the same commands from the Command Menu: press Ctrl + Shift + P (Cmd + Shift + P on a Mac) and type “screenshot”. The Command Menu has an extra Capture node screenshot option that captures a single selected element, which is handy for documenting one component.

Method 2: a mobile view extension

If you take mobile screenshots regularly, the DevTools route gets repetitive. Mobile View Extension puts a screenshot button in its floating toolbar. Choose a phone or tablet preset, and it saves a PNG of the framed viewport, exactly what is shown in the preview. Because the extension keeps the mobile view on while you navigate, you can click through a site and capture each page in a few seconds.

This produces viewport screenshots. For a full-length capture, DevTools is the better tool.

Method 3: a real phone

Screenshots from a real phone are the most honest, because they include the browser’s address bar, the notch or dynamic island, and the real font rendering. On most phones, a scrolling or “full page” capture option appears after you take a normal screenshot. On iPhone, Safari offers a Full Page tab in the screenshot editor that saves the page as a PDF.

Use real-device captures for anything a customer or stakeholder will judge pixel by pixel.

Getting sharp, accurate images

A few details make mobile screenshots more useful:

Device pixel ratio decides sharpness. A 390 px wide iPhone viewport at a pixel ratio of 3 produces a 1170 px wide image. If your screenshot looks blurry, check that the emulated device has the right pixel ratio. The iPhone viewport chart lists ratios for current models.
Wait for fonts and images. Capture after web fonts and lazy-loaded images have loaded, or you will ship a screenshot with fallback fonts and grey boxes.
Dismiss overlays deliberately. Cookie banners and chat widgets cover a large share of a small screen. Decide whether the screenshot should show them; for bug reports, it usually should.
Say what you emulated. Add the device, browser and date to the file name or ticket, for example pricing_iphone-16_chrome-emulated_2026-10-21.png. In-browser tools render with Chrome’s engine, so a screenshot labelled “iPhone” may differ slightly from real Safari.

Using mobile screenshots in your workflow

Mobile screenshots earn their keep in three places. In QA, attach them to tickets so developers see the exact viewport where something broke; pair the image with the width, which you can read from the device toolbar. In design reviews, put mobile and desktop captures side by side to check that the content order still makes sense. In marketing, use framed screenshots on landing pages and in app listings, but take them from a real device or a clearly labelled emulation.

For the wider testing process these screenshots feed into, see the mobile website testing checklist.

Frequently asked questions

How do I take a full-page mobile screenshot in Chrome?

Open DevTools, toggle the device toolbar, choose a device, reload, then pick Capture full size screenshot from the device toolbar’s three-dot menu.

Can I take a mobile screenshot without DevTools?

Yes. A mobile view extension with a screenshot button, such as Mobile View Extension, captures the phone-sized view from a floating toolbar.

Why is my mobile screenshot so wide in pixels?

Screenshots are saved at the device pixel ratio. A 390 px wide viewport at 3x produces a 1170 px wide image. That is expected and keeps the image sharp on high-density screens.