How to Capture a Mobile Website Screenshot at 400 Pixel Width for Indian Users

To capture a mobile website at 400 pixels wide, set the browser viewport to 400 CSS pixels, then capture either the visible viewport or the full page. In Chrome, use DevTools Device Mode with the Responsive preset. For repeatable captures, set a 400-pixel viewport in Playwright. If the saved image itself must be exactly 400 raster pixels wide, use CSS-pixel screenshot scaling and check the output dimensions.

“For Indian users” does not change how you set the width. It may mean you also need to test a relevant locale, timezone, or geolocation. Those are separate settings from viewport width, and emulation does not guarantee the same experience as a physical phone on a particular network.

What 400 pixels means

Use 400 CSS pixels for the viewport when your goal is to test responsive layout and media queries. CSS pixels are logical layout units; a screenshot’s raster dimensions can be larger when device pixel ratio (DPR) or device-scale output is used. Playwright’s scale: 'css' produces one output pixel per CSS pixel, while scale: 'device' follows device scale.

So distinguish these two requirements:

Test the layout at 400 wide: set viewport width to 400 CSS pixels.
Save an image exactly 400 pixels wide: set the viewport to 400 CSS pixels, capture with CSS scaling, then inspect the saved file dimensions.

Browser zoom is not a substitute for changing the viewport. Chrome DevTools can set a custom responsive width and capture the visible viewport or the full page. See Chrome DevTools Device Mode documentation.

Capture it manually in Chrome

Open the page in Chrome and open DevTools.
Turn on Toggle device toolbar.
Choose Responsive in the device dimensions menu.
Enter 400 in the width field. Set a height appropriate to the visible area you want.
If mobile rendering or touch behavior matters, set the device type to Mobile. Chrome also offers Mobile (no touch) and Desktop modes, which differ in rendering behavior and event types.
Wait for the page to settle. Open More options and choose Capture screenshot for the current viewport, or Capture a full size screenshot for the whole scrollable page.
If a specific output file width matters, open the saved image and confirm its raster dimensions.

Device Mode can also show responsive breakpoints, simulate geolocation, and apply network or CPU throttling. Use those options only when they are part of the test brief. Chrome describes Device Mode as an approximation of how a page looks and performs on a mobile device; use a physical phone or remote debugging when hardware-specific behavior matters.

Automate the capture with Playwright

Set the viewport before navigation so the page can respond to the intended size as it loads. This example captures the visible viewport at a 400 CSS-pixel width and saves a CSS-scaled PNG:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage({
    viewport: { width: 400, height: 850 },
    deviceScaleFactor: 1
  });
  await page.goto('https://example.com', { waitUntil: 'networkidle' });
  await page.screenshot({
    path: 'mobile-400.png',
    fullPage: false,
    scale: 'css'
  });
  await browser.close();
})();

Install Playwright in your project with npm install playwright. If your environment does not already have the browser binaries, install them using the Playwright browser installation instructions. Replace the example URL with the page to capture.

To capture the whole page, change fullPage to true. That changes the capture height, not the 400 CSS-pixel viewport width. To produce a higher-density raster, use scale: 'device'; the resulting image can be wider than 400 pixels. See the Playwright screenshot documentation and Page API.

Test India-specific page variations

A site may vary by locale, timezone, or location. Set those only when the site or test brief calls for them; they do not set the viewport width. Playwright supports locale, timezone, and geolocation emulation. For example:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext({
    viewport: { width: 400, height: 850 },
    deviceScaleFactor: 1,
    locale: 'en-IN',
    timezoneId: 'Asia/Kolkata',
    geolocation: { latitude: 28.6139, longitude: 77.2090 },
    permissions: ['geolocation']
  });
  const page = await context.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'mobile-400-india.png', scale: 'css' });
  await browser.close();
})();

The coordinates here represent New Delhi; use the location relevant to your test instead. A simulated locale or location is not proof of the exact experience for every Indian user, account, handset, or carrier. For device-specific behavior, verify on a real phone.

Choose the right capture dimensions

Need	Setting	What to check
Responsive layout at the requested width	Viewport width: 400 CSS pixels	Media queries and layout reflect the 400-pixel viewport.
Only the visible area	Viewport screenshot; set the viewport height to suit	The saved image shows only what fits in that viewport.
All content below the fold	Full-page capture	Width remains tied to the viewport; image height grows to include page content.
Raster file exactly 400 pixels wide	CSS screenshot scale	Inspect the actual image dimensions after capture.
High-density screenshot	Device scale	Output raster width may be greater than 400 pixels.
Location-dependent content	Set the required locale, timezone, or geolocation separately	Confirm which regional signal the site uses.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its API accepts a URL in one GET request; see the API documentation. Set the width to 400 for this capture:

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com \
  -d width=400 \
  -o mobile-400.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com", "width": 400},
    timeout=90,
)
r.raise_for_status()
with open("mobile-400.webp", "wb") as f:
    f.write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com',
  width: '400'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('mobile-400.webp', Buffer.from(await res.arrayBuffer()));

Cookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed. An 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. Sign up for 1,000 free screenshots a month.

Troubleshooting

Problem	Likely cause	Fix
The screenshot is wider than 400 pixels	Device-pixel scaling or DPR increased the raster dimensions.	Use CSS screenshot scaling, then inspect the saved image size.
The page layout does not look mobile	The viewport may not have been set before navigation, or the page may depend on mobile rendering or touch behavior.	Set the viewport before loading; in Chrome, select Mobile when touch behavior matters. Check the site’s viewport configuration if its layout remains unexpected.
Content below the fold is missing	A viewport-only capture was taken.	Use Chrome’s full size screenshot or Playwright’s `fullPage: true`.
Some images or content are missing	The page may still be loading or use lazy loading.	Wait for the relevant content to load before capture. For full-page automated capture, check that below-the-fold content has been loaded by the page.
The regional version is wrong	Viewport width does not control locale, timezone, or geolocation; the site may also use account or network signals.	Set the required emulation settings and validate against the actual test conditions.
A 400-wide capture differs from a real phone	Desktop emulation approximates device behavior and may not reproduce handset hardware or carrier conditions.	Check on the target phone or use remote debugging when hardware-specific fidelity matters.

Performance, reliability, and cost

Chrome DevTools is a direct choice for a one-off capture and requires no screenshot service. Playwright is useful when captures need to be repeated with the same viewport and settings. A full-page capture can include much more content than a viewport image, so first decide which output is required. Waiting too little can miss late-loading content; waiting for network idle can take longer on pages with ongoing requests. For consistent results, use the same URL, viewport, wait condition, and regional settings for each run.

ScreenshotNeo offers a free plan of 1,000 shots per month without a card. Paid plans are Starter at $5 for 3,000, Growth at $15 for 15,000, Pro at $39 for 60,000, Scale at $99 for 250,000, and Business at $249 for 1,000,000; yearly billing gives two months free. Every feature is on every plan. Its responses identify page verdict and billing status in headers; cache hits and failed or unusable captures are not billed. Review the current product details at ScreenshotNeo.

FAQ

Should I enter 400 or 400px in Chrome?

Enter 400 in the responsive width field. The setting represents CSS pixels.

Does “for Indian users” mean I need an India-sized viewport?

No. Keep the requested width at 400 CSS pixels. Configure locale, timezone, or location separately if the page varies on those signals.

Will a 400 CSS-pixel viewport always create a 400-pixel-wide file?

No. Device pixel ratio and screenshot scaling affect raster dimensions. Use CSS scaling and verify the saved image.

Is browser emulation enough to certify a mobile experience?

It is useful for layout checks, but it approximates mobile behavior. Use the target phone when device-specific behavior matters.