ScreenshotNeo

BlogHow-to

How to Screenshot a Website in Hindi and English at the Same Mobile Size

Capture Hindi and English pages at the same mobile viewport, then compare them fairly. Set the same width, height, device pixel ratio, and capture mode.

By the ScreenshotNeo team4 October 20267 min read

To screenshot a website in Hindi and English at the same mobile size, capture both language versions with the same viewport width, viewport height, device pixel ratio (DPR), browser state, page position, and screenshot mode. In Chrome on a computer, use DevTools Device Mode to set those values, then capture either the visible viewport or the full page for both versions. This makes the setup repeatable; it does not guarantee the two pages contain identical content or render identically on a real phone.

What “the same mobile size” means

For a controlled browser comparison, “same size” means holding three settings constant:

  • Viewport width and height: the visible web area in CSS pixels.
  • Device pixel ratio (DPR): the ratio of physical pixels to logical CSS pixels. DPR can affect rendering and output dimensions.
  • Capture extent: either the current viewport or the full page. These produce different image heights, so use the same mode for both captures.

Also keep the page position, browser state, and relevant capture conditions consistent. A language page may have different text length, line wrapping, menus, or content height. Those are differences to observe, not settings to normalize away.

Capture both versions with Chrome DevTools

  1. On a computer, open the Hindi version of the page in Chrome.
  2. Open DevTools. Use the DevTools menu and select More tools → Device mode, or click the device toolbar toggle in DevTools.
  3. Select a mobile preset, or enter a custom viewport width and height. Record the CSS-pixel dimensions.
  4. Set or record the device scale factor (DPR) in the Device Mode controls. Keep it unchanged for the second capture.
  5. Set the page to a consistent state: same scroll position, consent choice, logged-in state, and other relevant browser state. Wait until the content you intend to compare has loaded.
  6. Open the English version of the same page. Confirm the viewport dimensions and DPR still match. Return to the same page position and equivalent browser state.
  7. Capture both pages using the same command: use Capture screenshot for the visible viewport, or Capture full size screenshot for the entire page.
  8. Check the resulting image dimensions and compare the captures side by side. If you need a reproducible record, note the URLs, viewport dimensions, DPR, capture mode, and date.

Chrome Device Mode simulates a mobile experience from a desktop. It is useful for repeatable viewport settings, but it does not reproduce every behavior of a physical phone. If your conclusion concerns a specific phone, verify the page on that actual device too.

Viewport capture or full-page capture?

Goal Choose What the image contains
Compare what a mobile visitor sees without scrolling Capture screenshot The current visible viewport
Compare page structure and content from top to bottom Capture a full size screenshot The full page, including content outside the viewport

Pick the mode based on the question you are answering, and apply it to both language versions. A viewport image and a full-page image are not comparable extents.

Use Android for a real-device screen capture

To capture the current screen directly on Android, open the page and press Power and Volume Down at the same time. On some devices, you can instead hold Power for a few seconds and tap Screenshot. If neither works, check the device manufacturer’s instructions. Android 12 and later also support scrolling screenshots on most screens that allow scrolling.

A phone screenshot records the phone’s screen. It does not give you the same explicit cross-language custom viewport controls described above. For a controlled pair, use one device and orientation, capture both versions in the same way, and check the output dimensions. For a repeatable web viewport with recorded width, height, and DPR, use DevTools.

Use Safari Responsive Design Mode

If you work in Safari, Responsive Design Mode offers viewport presets and lets you save changed dimensions as a custom size. Select a preset or custom viewport, keep it consistent across the Hindi and English pages, and use the same capture extent and page state for both. Refer to Apple’s Responsive Design Mode documentation for the browser’s controls.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. It can capture a page at a chosen viewport; pass the Hindi or English URL and the same viewport settings to each request. See the ScreenshotNeo API documentation for the available parameters.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/hi -o hindi.webp

Make the second request with the English page URL and save it as a separate file. Replace the example URLs with the actual URLs you want to compare, and configure matching viewport dimensions and DPR in the request.

import requests

params = {
    "access_key": "YOUR_API_KEY",
    "url": "https://example.com/hi",
}
r = requests.get("https://api.screenshotneo.com/v1/shot", params=params, timeout=90)
r.raise_for_status()
open("hindi.webp", "wb").write(r.content)

For the English capture, change the URL and output filename. Repeat the same request settings for both language versions.

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com/hi'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('hindi.webp', res);

This Node.js example uses Bun’s file writer to save the response. In Node.js, write the response bytes with the filesystem API; use the same request parameters for the English URL.

With ScreenshotNeo, cookie and consent banners are accepted and more than 60 known consent platforms, newsletter popups, and chat widgets are removed before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers identify the page verdict and billing status. Its MCP server gives AI agents tools to take screenshots, get page information, and capture PDFs. 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.

Troubleshooting

Problem Likely cause What to do
The image dimensions differ Viewport, DPR, or capture extent changed between captures. Recheck width, height, DPR, and whether both captures used viewport or full-page mode. Capture again with matching settings.
The pages start at different content The scroll position or page state differs. Return both pages to the same position and match relevant consent, login, and navigation state.
Text wraps differently even though the image sizes match Hindi and English text can have different lengths and shaping, or the pages may use different content or fonts. Confirm the viewport and DPR first. Treat remaining wrapping differences as page behavior; check that the intended fonts and language content have loaded.
A full-page capture is much taller for one language One translation may occupy more lines or include different content. Keep full-page mode for both and compare the page structure. For a fixed-height comparison, use viewport captures instead.
DevTools does not look exactly like a phone Device Mode is an emulation and cannot simulate every mobile-device aspect. Use it for consistent viewport-based comparisons, then verify on the target physical device if device-specific behavior matters.
The Android screenshot shortcut does not work Button behavior can vary by manufacturer or device configuration. Try holding Power and selecting Screenshot, or consult the device manufacturer’s instructions.

Reliability and comparison checklist

  • Use the same viewport width and height in CSS pixels.
  • Keep DPR fixed and record it.
  • Choose viewport or full-page capture once, then use that mode for both.
  • Match orientation, page position, and relevant browser state.
  • Wait for the intended content and fonts to load before capturing.
  • Check image dimensions before drawing conclusions from side-by-side images.
  • Use a real phone when the claim is specifically about that device’s rendering.

For repeated comparisons, record the settings alongside the images. That makes it easier to tell a real language-layout difference from a changed capture setup. Browser and device captures require no screenshot-service purchase; an API can be useful when you need repeatable requests or automation. ScreenshotNeo’s free tier covers 1,000 shots per month, and its paid tiers range from $5 for 3,000 to $249 for 1,000,000; yearly billing gives two months free. Every feature is on every plan.

FAQ

Does matching dimensions make the two screenshots identical in scale?

It matches the capture setup. The languages may still produce different line breaks, page heights, or content layouts.

Should I use the phone screenshot or DevTools?

Use DevTools when you need an explicitly controlled and repeatable web viewport. Use a phone capture when you need to document what appeared on that actual device.

Can I compare a viewport screenshot with a full-page screenshot?

They show different extents. Use the same capture mode for both language versions to make a fair comparison.

Do I need to buy anything?

No. Chrome DevTools, Safari Responsive Design Mode, and the Android screenshot feature are built-in browser or device tools. ScreenshotNeo also has a free plan with 1,000 shots each month and no card required.

Primary sources