How to Capture a Mobile Viewport with ShrinkTheWeb

Short answer: The historical ShrinkTheWeb Drupal 8 integration guide uses native_resolution for browser or viewport width and widescreen_resolution_y for viewport height. Set both to the mobile-sized dimensions you want to render. The guide is dated 2019 and documents a Drupal integration, not verified current ShrinkTheWeb REST API syntax. Check current first-party documentation or your account before adapting these settings to a live service.

A viewport screenshot shows what fits inside the selected browser area. It does not necessarily capture the entire page. The historical integration lists full_length separately for full-length output.

1. Set the mobile viewport in the historical Drupal integration

The Drupal 8 guide demonstrates per-capture settings in a render array. Replace the sample URL and dimensions with your target. This is an example for that Drupal integration; it is not a standalone PHP script or a current ShrinkTheWeb API request.

<?php
$url = 'https://example.com';
$render = array(
  '#theme' => 'shrinktheweb_image',
  '#url' => $url,
  '#native_resolution' => 390,
  '#widescreen_resolution_y' => 844,
  '#full_length' => false,
  '#delay' => 2,
  '#quality' => 90,
);
print drupal_render($render);
?>

The width and height values above are example CSS-pixel dimensions, not a named phone preset. The guide describes these options as browser resolution or viewport width and height; it does not establish device emulation, a particular phone model, or a device pixel ratio.

For a shared Drupal configuration, the guide says to use the ShrinkTheWeb settings page at admin/config/media/shrinktheweb. Shared size, length, and browser-resolution settings affect all screenshot instances using those settings. Per-request render-array options let an individual capture differ. See the historical Drupal 8 setup and usage guide and check the module project record before relying on this integration today.

2. Choose viewport, capture extent, and output size separately

Goal	Historical option	What the Drupal guide says
Set responsive browser width	native_resolution	Browser resolution or viewport width
Set responsive browser height	widescreen_resolution_y	Browser resolution or viewport height
Capture the full page	full_length	Whether to request a full-length screenshot
Set output image width	custom_width	Custom image width; this is not the viewport width
Limit or crop output height	max_height	Image crop height
Wait after page load	delay	Number of seconds to delay after load
Set image quality	quality	Quality from 1 to 100

For a mobile layout check, set the viewport dimensions first and leave output resizing alone unless you also need a particular image size. Resizing an image after capture is not the same as rendering the page at a narrower viewport: the latter can trigger responsive CSS, different navigation, and different line wrapping.

3. Confirm what “mobile” means for your use case

A width and height define a viewport. They do not, by themselves, prove that a browser is emulating a phone. Full device emulation can also involve a mobile user agent, touch capability, and pixel density. The historical ShrinkTheWeb guide does not document those behaviors, so do not assume them from the viewport parameters alone.

• Responsive layout review: A mobile-sized viewport may be enough to inspect CSS breakpoints and visible content.
• Device-specific behavior: If the page changes based on user agent, touch input, or pixel density, verify that the integration supports the particular behavior you need.
• First screen versus whole page: Use viewport capture for the initially visible area; use the separately documented full_length setting when you need the full page, subject to current support.
• Account availability: The historical guide warns that some features require an upgraded account. It does not verify present-day plan names, prices, or entitlements.

4. Validate the result

1. Capture a page with a layout you can inspect, using the desired viewport width and height.
2. Check whether navigation and columns reflow as expected. If the page still looks like desktop, confirm the settings are reaching the capture integration and that the site’s breakpoints apply at that width.
3. Compare viewport capture with a full-length capture only if you need to verify below-the-fold content.
4. Check output dimensions separately from the viewport. A resized image can have different pixel dimensions while preserving the layout rendered at the original viewport.
5. Verify current ShrinkTheWeb service availability, parameter support, and account requirements with its current first-party materials before shipping an automated workflow. The available historical sources do not establish those current details.

5. Troubleshooting

Symptom	Likely cause	What to check
The page still looks like desktop	The viewport options may not be applied, or the site may not switch layouts at that width.	Confirm the values reach the Drupal render array or shared settings, inspect the target site’s responsive breakpoints, and verify current integration behavior.
The screenshot is narrow but content is clipped	Output crop or height settings may be limiting the image; viewport capture may also show only the visible area.	Distinguish viewport height from max_height and check whether full-length capture is required.
Image dimensions differ from the requested viewport	custom_width changes output image width, while viewport dimensions control rendering.	Review output-size options independently from viewport options.
Content is missing because it loads late	The page may populate content after the initial load.	The historical integration documents delay in seconds after page load. Try an appropriate delay if the current integration still supports it.
A parameter has no effect	The option may not be supported by the current service, Drupal module, or account tier.	Check current first-party documentation and account entitlements. The Drupal guide is historical and notes that some features require an upgrade.
The example fails outside Drupal	The code uses Drupal’s render system and theme hook.	It is not a direct HTTP API example. Do not invent an endpoint or request signature; obtain current ShrinkTheWeb API instructions before building a standalone client.

6. Performance, reliability, and cost considerations

For a small number of captures, the historical Drupal guide does not provide timing or reliability benchmarks. A configured delay adds at least that wait to the capture workflow, and full-page capture can involve more page content than a viewport-only result. Measure your own workflow against the current service and target pages rather than assuming a fixed capture time.

The guide describes Drupal-side thumbnail caching and a configurable cache duration, but that is not a guarantee about current hosted-service caching. Decide how often pages need refreshing and confirm cache behavior in the current integration. The available sources do not verify current ShrinkTheWeb pricing or account limits; the historical guide only says some features require an account upgrade.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its API accepts a URL in one GET request and can return an image or PDF. The example below captures a mobile-sized viewport; check the ScreenshotNeo documentation for the complete parameter list.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com \
  -d viewport_width=390 \
  -d viewport_height=844 \
  -o shot.webp

ScreenshotNeo removes cookie banners, popups, and chat widgets before capture, and each step can be turned off. 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.

Sign up free for 1,000 screenshots a month, with no card required.

FAQ

Which historical ShrinkTheWeb option sets mobile width?

The Drupal guide identifies native_resolution as browser resolution or viewport width.

Which option sets mobile height?

The same guide identifies widescreen_resolution_y as browser resolution or viewport height.

Does a mobile viewport guarantee phone emulation?

No such guarantee appears in the historical guide. Viewport dimensions alone do not document user-agent, touch, or pixel-density emulation.

Can I use these names in a current direct API request?

The evidence here documents them in a historical Drupal integration. It does not verify current ShrinkTheWeb API parameter names or request syntax; confirm those with current first-party documentation.