How to Fix a Mobile Screenshot That Scales the Website Instead of Using the Viewport

If a mobile screenshot shows your whole website shrunk to fit instead of using the phone-sized viewport, first check the page’s viewport declaration. Add this inside the document’s <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width tells the browser to lay out the page at the device’s CSS viewport width. initial-scale=1 sets the initial zoom. Then fix any content that overflows horizontally: the declaration enables a narrow layout, but it does not make fixed-width desktop content responsive by itself. Keep user zoom available.

1. Why a mobile website looks zoomed out

Some mobile browsers can lay out a page without viewport metadata in a wider virtual layout viewport, then scale that layout down to fit the screen. MDN describes a typical fallback of 980 CSS pixels in some mobile browsers. The result can look like a desktop site scaled down on a phone: text and controls become tiny, and narrow-screen media queries may not apply as intended. MDN: viewport meta tag; MDN: CSS viewports.

The layout viewport is the space the browser uses to lay out the page. The visual viewport is the portion currently visible on screen. Pinch zoom changes the visual viewport and its scale; it does not necessarily change the layout viewport. MDN: VisualViewport.

2. Add the viewport declaration

Open the HTML document or the framework’s page metadata configuration.
Make sure the rendered document’s <head> includes one deliberate viewport declaration with width=device-width.
Use initial-scale=1 as the usual initial scale.
Inspect the final HTML delivered to the browser. A template or component setting is not enough if the rendered page omits or replaces it.
Reload at a narrow mobile CSS viewport and inspect the layout and screenshot.

A minimal complete HTML example:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive page</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; font: 1rem/1.5 system-ui, sans-serif; }
    main { width: min(100% - 2rem, 64rem); margin-inline: auto; }
    img { display: block; max-width: 100%; height: auto; }
    pre { max-width: 100%; overflow-x: auto; }
  </style>
</head>
<body>
  <main><h1>Responsive page</h1><p>Content fits the available viewport.</p></main>
</body>
</html>

The viewport metadata sets the browser’s layout width; responsive CSS must still let content fit. Avoid fixed minimum widths unless horizontal scrolling is intentional, constrain images, and give long code or tables a deliberate overflow treatment.

3. Find and fix horizontal overflow

If the viewport declaration is correct but the screenshot still looks wrong, check whether an element forces the page wider than the phone:

Fixed-width wrappers such as width: 1200px or large min-width values.
Images, videos, canvases, or embedded content wider than their container.
Tables with many columns, unbroken long strings, or code blocks that expand the page.
Absolutely positioned elements extending beyond the viewport.
Flex or grid children that cannot shrink because of intrinsic sizing; min-width: 0 on the relevant child can help.

Prefer fixing the element that causes overflow. For media, a common baseline is max-width: 100%; height: auto. For tables or code that need their own width, put them in a container with overflow-x: auto rather than widening the whole document. Do not use overflow-x: hidden as a blanket fix if it merely clips content or controls.

4. Diagnose the rendered page and screenshot

Inspect the emitted head. Confirm the final HTML has one viewport declaration and that its content includes width=device-width. Check for duplicate metadata or scripts that modify the head.
Check the layout at a narrow CSS width. Look for horizontal scrolling, fixed-width containers, oversized media, and breakpoints that do not activate.
Compare browser and capture output. If the page is responsive in the browser but the image looks uniformly reduced, check the capture viewport, device emulation, device scale factor, page zoom, and any output resizing. A high-resolution screenshot can have more image pixels than CSS pixels; that alone does not mean the layout viewport is wider.
Measure both viewports when needed. Run this in the top-level page context:

console.table({
  innerWidth: window.innerWidth,
  documentClientWidth: document.documentElement.clientWidth,
  visualViewportWidth: window.visualViewport?.width,
  visualViewportScale: window.visualViewport?.scale
});

Interpret these values in context. Pinch zoom and the on-screen keyboard can affect visual viewport measurements. The VisualViewport API provides width, height, offsets, and scale for inspecting that visible region.

5. Preserve accessible zoom

Do not add user-scalable=no or restrictive maximum-scale values to make the screenshot appear fixed. Those settings can prevent people with low vision from zooming to read the page. Keep browser zoom available and correct the viewport and layout instead. MDN’s viewport guidance discusses the accessibility impact of disabling zoom.

6. Or skip the browser setup

ScreenshotNeo captures a URL with one API request. Its screenshot API accepts viewport and device options, and its documentation lists the available parameters. A screenshot API can capture the page at a requested viewport, but it cannot repair unresponsive CSS in the page itself.

cURL:

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

Python:

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={
        "access_key": "YOUR_API_KEY",
        "url": "https://stripe.com",
        "width": 390,
        "height": 844,
    },
    timeout=90,
)
r.raise_for_status()
open("mobile.webp", "wb").write(r.content)

Node.js:

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.com',
  width: '390',
  height: '844',
});
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('mobile.webp', new Uint8Array(await res.arrayBuffer()));

These examples request a 390 by 844 CSS-pixel viewport; choose dimensions that match the case you need to inspect. ScreenshotNeo can accept cookie banners like a visitor and remove more than 60 known consent platforms, newsletter popups, and chat widgets before capture, with each step configurable. Bot checks, blank pages, failed loads, timeouts, and cache hits cost nothing; response headers identify the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for AI agents. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots. Sign up for 1,000 free screenshots a month, no card required.

7. Troubleshooting

Symptom	Likely cause	What to do
The phone screenshot shows a tiny desktop page	Missing or ineffective viewport metadata	Inspect delivered HTML and add one `width=device-width` declaration.
The viewport tag is present, but the page is still too wide	Fixed-width content or horizontal overflow	Find the overflowing element and make it responsive or give it its own scroll container.
The source template has the tag, but the browser does not	Framework output, a layout override, or head mutation differs from source	Inspect the final document head in the browser and fix the rendered output.
The browser looks right but the captured image is uniformly scaled	Capture viewport, emulation, zoom, device scale factor, or post-capture resize differs	Compare CSS viewport dimensions and output pixel dimensions; remove unintended resizing.
The measured visual viewport is unexpectedly narrow	Pinch zoom or on-screen keyboard changes the visible region	Check `visualViewport.scale` and repeat at normal zoom with the keyboard closed.
Adding `initial-scale=1` did not solve it	Overflow remains, or the declaration is absent from the emitted head	Verify rendered markup and inspect wide elements; the scale value does not make desktop CSS responsive.

8. Performance, reliability, and cost notes

The viewport declaration is a small markup change and adds no capture service dependency. Responsive fixes can reduce awkward horizontal scrolling, but check that tables, code, and other intentionally wide content remain usable. For repeatable screenshot comparisons, hold the CSS viewport, browser zoom, device scale factor, page state, and output resizing constant; otherwise, differences in the image may not reflect a layout change.

If you use an API, set a request timeout appropriate to the page and handle non-success HTTP responses before writing the response body as an image. ScreenshotNeo’s response headers indicate verdict and billing; its stated billing policy excludes bot checks, blank pages, failed loads, timeouts, and cache hits. Its listed monthly plans are Free (1,000), Starter ($5 for 3,000), Growth ($15 for 15,000), Pro ($39 for 60,000), Scale ($99 for 250,000), and Business ($249 for 1,000,000); yearly billing gives two months free. Every feature is on every plan. See the API documentation for request options.

9. FAQ

Is a viewport tag enough to make a desktop website mobile-friendly?

No. It gives the browser the intended layout viewport. CSS and content still need to fit that width.

Should I use `width=device-width, initial-scale=1`?

It is a common declaration for using the device’s CSS width at the initial scale. Check the emitted head and fix overflow if shrinking persists.

Why does a mobile screenshot have more pixels than the viewport width?

CSS viewport dimensions and image pixel dimensions can differ because of device scale or capture output settings. Compare the rendered layout width separately from the saved image dimensions.

Can I disable pinch zoom to make screenshots consistent?

No. Leave user scaling enabled for accessibility. Make screenshot conditions consistent through viewport and capture settings instead.