How to Emulate an iPhone 12 mini for Website Screenshots in Chrome
Set Chrome to the iPhone 12 mini’s 360 × 780 CSS-pixel portrait viewport and DPR 3, then capture the visible screen or full page.
To emulate an iPhone 12 mini for a website screenshot in Chrome, use DevTools Device Mode with a portrait viewport of 360 × 780 CSS pixels, set device pixel ratio (DPR) to 3, and choose a mobile device type if you need touch events. Then capture either the visible viewport or the full page. Apple lists the phone’s logical layout as 360 × 780 points, corresponding to 1080 × 2340 physical pixels at 3×. Apple’s layout reference and Chrome’s Device Mode guide document the relevant values and controls.
Configure Chrome for the iPhone 12 mini
- Open the page you want to capture in Chrome.
- Open DevTools: use F12 or Ctrl+Shift+I on Windows/Linux, or Cmd+Option+I on macOS.
- Toggle the device toolbar with Ctrl+Shift+M on Windows/Linux or Cmd+Shift+M on macOS. You can also click the device toolbar icon in DevTools.
- In the device selector, choose Responsive or add a custom device. Set width to 360, height to 780, and DPR to 3.
- Choose the Mobile device type if you are checking touch interactions. Use Mobile (no touch) when you want mobile viewport rendering but click events instead.
- Keep portrait orientation for the standard layout. Rotate the emulated viewport to check landscape behavior.
- Open the Device Mode menu and choose Capture screenshot for the visible viewport or Capture full size screenshot to include content beyond the fold.
Chrome’s controls can vary slightly by version. If you do not see a DPR field or device type selector, check the Device Mode toolbar and its options menu, or use a custom device configuration.
Understand viewport size, DPR, and screen resolution
| Setting | Use | What it represents |
|---|---|---|
| Viewport width | 360 CSS pixels | The width used by the page’s responsive layout in portrait. |
| Viewport height | 780 CSS pixels | The emulated portrait viewport height. |
| DPR | 3 | The ratio of device pixels to CSS pixels. At 3×, a 360 × 780 CSS-pixel viewport corresponds to 1080 × 2340 device pixels. |
| Device type | Mobile | Mobile rendering and touch events; Mobile (no touch) keeps mobile rendering while sending click events. |
| Screenshot scope | Viewport or full size | Viewport captures the visible area; full size includes content outside it. |
Do not enter the physical resolution as the CSS viewport. Apple lists the iPhone 12 mini display as 2340 × 1080 pixels at 476 ppi, while its layout table gives the logical 360 × 780-point portrait size. For responsive web layout, use the logical dimensions and DPR separately. See Apple’s iPhone 12 mini technical specifications.
Choose the right screenshot scope
Capture the viewport
Use the regular screenshot option when you need to review the page as it appears in the initial visible area. This is useful for checking the header, first section, navigation, and initial responsive layout.
Capture the full page
Use the full-size screenshot option when you need the entire page, including content below the fold. Full-page capture can differ from what a user sees while scrolling: lazy-loaded images or scroll-triggered content may not appear until the page has been scrolled or otherwise activated. For a reliable review, scroll through the page first and confirm its content has loaded before capturing.
Validate the result
- Confirm the emulated width and height are 360 × 780 CSS pixels in portrait.
- Confirm DPR is 3; changing viewport dimensions alone does not set pixel density.
- Check whether the test requires touch behavior and choose Mobile accordingly.
- Verify that menus, sticky elements, images, and text fit the viewport.
- Capture the viewport for the visible frame and full size for the page beyond the fold.
- Repeat in landscape if the page must support that orientation.
What Chrome emulation does and does not prove
Chrome describes Device Mode as a first-order approximation of how a page looks and performs on a mobile device. It helps reproduce viewport size, DPR, and some mobile input behavior, but it does not run the site in iOS Safari or on iPhone hardware. Chrome also notes that mobile CPU architecture differs from desktop hardware, and that emulation cannot reproduce every browser API, CSS support difference, or behavior. Use a real device or an iOS simulator when the question depends on iOS-specific behavior or performance. See Chrome’s guidance on testing other browsers.
Troubleshooting
| Symptom | Likely cause | Fix |
|---|---|---|
| The page looks too large or too small. | The physical screen resolution was entered as the CSS viewport, or the viewport dimensions are wrong. | Set the CSS viewport to 360 × 780 and DPR to 3 separately. |
| The page layout looks right, but a touch interaction does not work. | The device type is set to a non-touch mode. | Select Mobile to send touch events, then repeat the interaction. |
| The screenshot cuts off lower content. | A viewport screenshot captures only what is visible. | Choose Capture full size screenshot for the page beyond the fold. |
| Images or sections are missing from the full-page capture. | The page may load them lazily or only after scrolling or interaction. | Scroll through the page and trigger the relevant sections before taking the screenshot. |
| The screenshot does not match iOS Safari. | Chrome Device Mode is an approximation in desktop Chrome, not an iPhone browser session. | Reproduce the issue in iOS Safari on real hardware or an iOS simulator. |
| The screenshot looks blurry. | The page may be using low-resolution assets, or the image preview may be scaled for display. | Check the saved image’s pixel dimensions and the page’s image sources; keep DPR at 3 for this target. |
Performance, reliability, and cost
Device Mode is convenient for quick, repeatable layout checks and requires no screenshot service. It is not a substitute for measuring performance on an actual phone: desktop hardware and the emulated browser environment can differ from mobile hardware. For browser-specific bugs, confirm the result on iOS.
For a repeatable screenshot, keep the viewport, DPR, orientation, page state, and capture scope consistent. Pages with animations, network-delayed content, cookie banners, or lazy images can produce different results between captures. Allow the page to settle and confirm required content is present before saving. This workflow has no per-screenshot API charge; its cost is the developer time needed to configure Chrome and repeat captures.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server for developers. Its API can return an image or PDF from one request, and its parameters include viewport and device presets. See the ScreenshotNeo site and API documentation.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo accepts cookie banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. Its MCP server provides screenshot tools for AI agents. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month, with no card.
FAQ
Is the iPhone 12 mini viewport 360 × 780 or 1080 × 2340?
Use 360 × 780 as the logical CSS viewport and DPR 3. The corresponding physical pixel dimensions are 1080 × 2340.
Do I need to select an iPhone preset?
No. A Responsive or custom device configuration with the correct dimensions and DPR gives you the target viewport. Select Mobile when touch events matter.
Does this guarantee the page will look identical on an iPhone?
No. It approximates the viewport and selected mobile behavior in desktop Chrome. Confirm iOS-specific rendering and interactions on a real device or simulator.
Should I use a viewport or full-page screenshot?
Use a viewport capture for the visible screen and a full-size capture for content across the page.
