How to Screenshot a Website at POCO X6 Screen Size in Chrome DevTools
Emulate a POCO X6-sized mobile viewport in Chrome DevTools, capture the visible screen or full page, and understand what the simulation cannot reproduce.
To screenshot a website at POCO X6 screen size in Chrome DevTools, open the page, turn on the device toolbar, select Mobile, and choose the POCO X6 preset if your Chrome version offers it. If it does not, choose Responsive and enter the viewport width, height, and device pixel ratio (DPR) you want to emulate. Then use More options → Capture screenshot for the visible viewport, or More options → Capture a full size screenshot for the whole page.
Xiaomi lists the POCO X6 display as 1220 × 2712 physical pixels in portrait orientation, with a 20:9 aspect ratio. Those are hardware pixel dimensions, not a verified Chrome CSS viewport. Xiaomi’s specification does not give the phone’s Chrome viewport size or DPR, so do not treat a guessed conversion as an exact device profile. See Xiaomi’s POCO X6 specifications.
1. Open Chrome’s device emulation
- Open the website you want to capture in Chrome on your computer.
- Open DevTools: right-click the page and choose Inspect, or use Chrome’s keyboard shortcut for DevTools.
- In DevTools, click Toggle device toolbar. You can also use the device toolbar shortcut shown in Chrome’s DevTools menu.
- In the device toolbar, choose a device preset if POCO X6 appears in the Dimensions list. Otherwise select Responsive.
- Set the device type to Mobile for mobile rendering and touch behavior. Choose portrait or use Rotate for landscape.
Chrome’s Device Mode documentation explains the toolbar, responsive dimensions, DPR, device types, rotation, and screenshot commands. The exact location or label of controls can vary between Chrome versions.
2. Set a POCO X6-sized viewport
If there is no POCO X6 preset, use Responsive mode and set a deliberate CSS viewport width and height. Treat DPR as a separate value. Xiaomi’s published 1220 × 2712 resolution describes physical display pixels; it does not establish the CSS viewport dimensions or the DPR reported by Chrome on the handset.
| Setting | What it controls | How to choose it |
|---|---|---|
| Width and height | The emulated layout viewport, in CSS pixels | Use values observed on the actual phone for a closer match. If unavailable, use a documented device profile rather than presenting an estimate as verified. |
| DPR | The relationship between CSS pixels and device pixels for rendering | Set it independently in device mode. Check window.devicePixelRatio on the real device when exact matching matters. |
| Device type | Mobile or desktop behavior and touch versus click input | Choose Mobile to emulate a mobile browser experience. |
| Orientation | Portrait or landscape viewport orientation | Use the Rotate control and capture again after the page reflows. |
For a quick check of the emulated values, open the DevTools Console and run:
console.log({
width: window.innerWidth,
height: window.innerHeight,
devicePixelRatio: window.devicePixelRatio
});This reports the current page’s viewport dimensions and DPR in the emulated browser context. For an exact device match, inspect the same values in Chrome on the POCO X6 itself and reproduce them in Responsive mode.
3. Capture the viewport or the full page
With device mode active and the page in the state you want:
- Open the DevTools More options menu.
- Choose Capture screenshot to save the currently visible viewport.
- Choose Capture a full size screenshot to include content below the visible viewport.
A full-size screenshot captures the full document; it does not mean the entire page is shown inside the phone-sized viewport at once. Use a viewport capture when you need to inspect what fits on the screen without scrolling. Use a full-size capture when you need the page’s complete vertical content.
4. Check the screenshot before relying on it
- Confirm the page is in portrait or landscape as intended.
- Check that width, height, device type, and DPR are the values you meant to use.
- Wait for images, fonts, and dynamic content to appear before capturing. If a page loads content as you scroll, scroll through it before taking a full-page capture.
- Check whether sticky headers, overlays, consent dialogs, or other page elements obscure the content you need.
- For a layout issue that depends on the actual handset, compare the emulated result with a screenshot from the POCO X6.
5. Know what Device Mode can and cannot match
Chrome describes Device Mode as a simulation: it does not run your code on a mobile device. It is useful for checking responsive layout and capturing a mobile-sized rendering, but it does not prove how every hardware-specific behavior will look or work on a POCO X6. Chrome recommends testing on an actual device when hardware behavior matters. The published screen resolution alone is not enough to reconstruct the handset’s exact browser viewport and DPR.
Common problems and fixes
| Problem | Likely cause | What to do |
|---|---|---|
| POCO X6 is missing from the device list | The installed Chrome version does not include that preset. | Select Responsive and enter the dimensions and DPR you need. Use values measured on the actual device if exact matching matters. |
| The screenshot is the wrong size | The capture used a different viewport, orientation, or capture command than intended. | Recheck Responsive width and height, device type, and rotation. Use viewport capture for the visible screen and full-size capture for the document. |
| The page looks different from the handset | Device Mode simulates the mobile experience and does not run on the phone’s hardware; the viewport or DPR may also differ. | Compare the real device’s viewport and DPR with the emulation settings. Validate on the phone for hardware-specific behavior. |
| Content is missing from a full-page capture | The page may load images or other content only after scrolling, or content may not have finished loading. | Wait for the page, scroll through lazy-loaded sections, then capture again. |
| The result shows a consent banner, chat widget, or popup | The site displays that element to the browser session. | Dismiss it manually if appropriate, or use a capture workflow that can handle consent and remove overlays. |
Performance, reliability, and cost
DevTools is a practical option for occasional manual captures and responsive layout checks. Capture time and file size can increase with long pages, large images, and dynamic content. Full-page capture is useful for reviewing the document, while viewport capture more directly represents the screen-sized view. Emulation improves repeatability, but real-device validation is the reliable check when the result depends on the handset itself.
There is no API charge for using Chrome DevTools. If you need repeatable captures across many URLs or want to automate the browser setup, an API can reduce manual work; account pricing and capture behavior then depend on the service you choose.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. Make one GET request with a URL to receive a screenshot or PDF. Its options include device presets and custom viewports, but use a device profile based on values you have verified if an exact POCO X6 CSS viewport and DPR are required. See the ScreenshotNeo API documentation.
For example, this cURL request captures a page:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpThe same request in Python:
import 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)And in Node.js:
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 removes cookie banners, newsletter popups, and chat widgets before the shot. Bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.
Sign up for 1,000 free screenshots a month, with no card required.
FAQ
Is 1220 × 2712 the right Responsive setting?
Those are Xiaomi’s published physical display pixels in portrait orientation, not a verified CSS viewport. Use actual browser viewport and DPR values for a closer emulation.
Can DevTools prove the page works on a POCO X6?
No. Device Mode simulates a mobile experience on your computer. Test on the handset when actual device behavior matters.
Which capture should I use for a screenshot of the phone screen?
Use Capture screenshot for the currently visible viewport. Use Capture a full size screenshot when you need the whole document.
