Free tools Windows power users keep installed
One-click scans. No signup required.
PhantomJS and Chrome can produce different screenshot pixel dimensions even when you specify the same width and height. A viewport is only the browser’s layout area; the capture rectangle, full-page mode, device-pixel ratio (DPR), zoom, and output scaling determine the bitmap that is written to disk. Align those controls first, measure the resulting files, and only then investigate differences in rendering engines, fonts, or page timing.
What actually determines a screenshot’s dimensions?
Think of a capture as a pipeline with separate stages:
- CSS viewport: the logical width and height used for layout (the values seen by
window.innerWidthandwindow.innerHeight). - Capture region: the visible viewport, a clip rectangle, or the entire document.
- Device scale: the ratio between physical output pixels and CSS pixels. Chrome exposes this as device-pixel ratio (DPR); a HiDPI setting can make a 1,000-CSS-pixel viewport render to more than 1,000 bitmap pixels.
- Post-capture scaling: zoom or an API option that resizes the rendered surface.
Two tools can therefore agree on a 1280×800 CSS viewport and still write files with different width, height, or both. PhantomJS’s screen-capture documentation separates viewportSize (the headless browser size) from clipRect (the portion captured). Chrome DevTools likewise distinguishes a screenshot of the visible viewport from a full-size screenshot that includes content below it.
Five causes of a PhantomJS–Chrome size mismatch
1. Viewport size is not output size
In PhantomJS, setting page.viewportSize = { width: 1280, height: 800 } establishes the page’s layout viewport. A later page.clipRect can crop that viewport, and a full-page workflow can produce a taller image. Chrome automation has the same conceptual split even when the controls have different names.
#1 Best Overall
- CRISP CLARITY: This 23.8″ Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
- WORK SEAMLESSLY: This sleek monitor is virtually bezel-free on three sides, so the screen looks even bigger for the viewer. This minimalistic design also allows for seamless multi-monitor setups that enhance your workflow and boost productivity
- A BETTER READING EXPERIENCE: For busy office workers, EasyRead mode provides a more paper-like experience for when viewing lengthy documents
2. Viewport capture versus full-page capture
A viewport screenshot contains only what is visible in the browser area. A full-page screenshot extends below the fold, so its height depends on document layout, scrollbars, lazy content, and fixed elements. Comparing one mode with the other is the most common explanation for a height mismatch.
3. Device-pixel ratio and scale
Chrome documentation defines DPR as the ratio of physical screen pixels to logical CSS pixels. If a 1,280-CSS-pixel viewport is captured at DPR 2, the raster surface may be about 2,560 pixels wide. The exact result also depends on the capture path and any output scaling. PhantomJS builds and wrappers may use different defaults, so record the effective scale instead of assuming it is 1.
4. Clip rectangle, zoom, and cropping
A clip rectangle changes both dimensions and origin. For a fixed 800×600 result, set the rectangle explicitly rather than relying on the page’s current bounds. Some hosted rendering APIs expose separate zoom and device-scale controls; those names and behaviors are service-specific and should not be treated as PhantomJS core options.
5. Different rendering engines and timing
PhantomJS uses WebKit, while Chrome uses its own browser stack. After geometry is aligned, the engines can still lay out text, fonts, media queries, SVG, and images differently. A late webfont or lazy image can also change document height between captures. Engine differences are a later diagnostic branch, not the first explanation for unequal file dimensions.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Rank #2
- CRISP CLARITY: This 22 inch class (21.5″ viewable) Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- 100HZ FAST REFRESH RATE: 100Hz brings your favorite movies and video games to life. Stream, binge, and play effortlessly
- SMOOTH ACTION WITH ADAPTIVE-SYNC: Adaptive-Sync technology ensures fluid action sequences and rapid response time. Every frame will be rendered smoothly with crystal clarity and without stutter
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
A controlled comparison that produces evidence
Use a stable local HTML file or URL and make readiness equivalent. Record settings and measurements for every run.
- Fix the input: use the same URL, viewport width and height, user agent where possible, and a deterministic test page. Wait for the same readiness condition (for example, a known selector and completed font/image loading).
- Measure inside the page: in Chrome, log
window.innerWidth,window.innerHeight,window.devicePixelRatio, and the document’s scroll dimensions. Capture the corresponding PhantomJS viewport values. - Choose one capture mode: compare viewport-only with viewport-only, or full-page with full-page. Do not mix them.
- Align clipping: set PhantomJS
clipRectfor a fixed crop. Configure Chrome’s capture bounds to the same CSS rectangle, or use its viewport screenshot action rather than full-size capture. - Record scale and zoom: note Chrome’s emulated DPR, operating-system display scale, browser zoom, and any automation-level scale factor. Record equivalent PhantomJS or wrapper settings.
- Inspect the bitmap: read the actual PNG, JPEG, or WebP width and height with an image tool. A matching CSS viewport does not prove matching output pixels.
- Only then compare pixels: if dimensions match but content differs, investigate engine version, font availability, CSS media queries, image loading, animation, and timing.
Reference configurations
PhantomJS viewport and clip
This minimal script makes the two geometry controls explicit. The exact PhantomJS binary and page readiness strategy depend on your legacy environment.
var page = require('webpage').create();
page.viewportSize = { width: 1280, height: 800 };
page.clipRect = { top: 0, left: 0, width: 1280, height: 800 };
page.open('https://example.com', function (status) {
if (status !== 'success') {
console.log('open failed: ' + status);
phantom.exit(1);
}
page.render('phantom-1280x800.png');
phantom.exit();
});viewportSize controls the browser layout area; clipRect controls the captured portion. For a full-page image, do not assume that changing the viewport height alone is equivalent—use a full-page method appropriate to your PhantomJS script and verify the resulting file.
Chrome DevTools and automation
In DevTools Device Mode, set the device or custom viewport, choose the DPR, then select either the visible-viewport screenshot or the full-size screenshot. In automation, apply the same choices explicitly. For example, a Puppeteer-style setup (API names vary by version) is conceptually:
Rank #3
- Clear visuals. Fluid motion: A 144Hz refresh rate and 1ms MPRT deliver smooth, tear‑free motion across work, gaming, and streaming for clearer, more fluid viewing.
- Eye comfort: TÜV Rheinland 3‑star* certification reduces harmful blue light while preserving stunning color quality without compromise. *TÜV Rheinland 3-star eye comfort certification.
- Wide viewing angle: Get consistent views across a wide 178° /178° viewing angle.
- In-Plane Switching (IPS): See excellent color accuracy and consistency across wide viewing angles with In-plane Switching (IPS) technology.
- Ultra-thin bezels: Maximize your viewing experience with thin bezels.
await page.setViewport({ width: 1280, height: 800, deviceScaleFactor: 1 });
await page.goto('https://example.com', { waitUntil: 'networkidle0' });
await page.screenshot({ path: 'chrome-viewport.png', fullPage: false });Do not compare this file with a PhantomJS full-page render. To compare full pages, use fullPage: true and ensure both pages have finished loading lazy content.
Capture one element instead of the document
When the requirement is a component rather than a page, select the same element in both tools and capture its bounding rectangle. This removes document-height and scroll-position variables, but fonts, borders, and DPR can still change the final pixel size.
How to report a reproducible result
For every comparison, publish a small settings record. Include:
| Field | What to record | Why it matters |
|---|---|---|
| CSS viewport | Width × height in CSS pixels | Controls layout and media queries |
| DPR or device scale | Configured and measured value | Maps CSS pixels to physical bitmap pixels |
| Capture mode | Viewport-only, element, clipped, or full page | Determines captured region and height |
| Clip rectangle | Top, left, width, height | Defines crop and output bounds |
| Zoom/output scale | Browser zoom and renderer scaling | Can resize the raster surface |
| Versions and OS | PhantomJS build, Chrome version, driver, operating system | Engine and font behavior varies by environment |
| Bitmap result | Actual image width × height | Confirms what was written to disk |
Troubleshooting by symptom
Width differs, height matches
- Check DPR or device scale first.
- Check browser zoom and any output-resize option.
- Verify that one tool is not adding or removing a scrollbar.
- Confirm the clip rectangle’s width and horizontal origin.
Height differs dramatically
- Check viewport versus full-page mode.
- Compare document scroll height after fonts, images, and lazy sections load.
- Look for a clip rectangle or element crop in one workflow.
- Ensure a fixed header or sticky element is not being handled differently by the capture path.
Both dimensions differ by a consistent factor
- Measure
window.devicePixelRatioin Chrome and the effective PhantomJS scale. - Look for a 2× or 1.5× display scale and for post-capture resizing.
- Compare the image metadata and pixel dimensions, not only CSS values shown in a UI.
Dimensions match but the page looks different
- Compare PhantomJS WebKit with the exact Chrome version and operating system.
- Install identical fonts and wait for
document.fonts.readywhere supported. - Disable animations or capture at a deterministic time.
- Wait for images and lazy content, and check CSS media-query breakpoints.
- Inspect bot checks, consent dialogs, and failed network requests that may replace the page.
PhantomJS reports a successful open but the image is blank
Check the page status, wait for a known selector, and log console and resource errors. A successful navigation callback does not guarantee that application content has rendered. Capture a diagnostic viewport first, then add clipping or full-page logic.
Rank #4
- CURVED FOR ENHANCED ENGAGEMENT: An immersive viewing experience with a curved monitor that wraps more closely around your field of vision; It creates a wider view, enhancing depth perception and minimizing peripheral distraction
- SMOOTH PERFORMANCE FOR SEAMLESS CONTENT: Stay in the action when playing games, watching videos, or working on creative projects; The 100Hz refresh rate reduces lag and motion blur so you don't miss a thing in fast-paced moments¹
- MORE GAMING POWER: Gain the edge with optimizable game settings; Color and image contrast can be adjusted to see scenes more vividly and spot enemies hiding in the dark; Game Mode adjusts any game to fill the screen so you can view every detail²
- KEEP IT EASY ON THE EYES: Care for your eyes and stay comfortable, even during long sessions; Advanced eye comfort technology certified by TÜV reduces eye strain by minimizing blue light and reducing irritating screen flicker²
- INCREASED VERSATILITY: Connect to more; Plug devices straight into your monitor for increased flexibility, making your computing environment even more convenient
Performance, reliability, and legacy considerations
Fixed viewport captures are generally cheaper to reason about and less sensitive to document growth than full-page captures. Full-page images require the page to lay out every relevant section and can trigger lazy loading, increasing time and memory use. For repeatable tests, freeze content, use a local fixture when possible, avoid animations, and save the measured settings beside each image.
PhantomJS is a legacy WebKit-based tool. If a modern site depends on current browser APIs, its output may be inherently different from Chrome even after geometry is identical. Treat PhantomJS as a compatibility baseline only when your application still requires it; otherwise, standardize on one maintained Chrome capture path and document its version.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
ScreenshotNeo provides a website screenshot API and MCP server. One GET request returns a PNG, JPEG, WebP, or PDF, with controls for viewport and device presets, retina scale, full-page capture, CSS-selector element capture, custom CSS and JavaScript, waits, headers, cookies, user agent, timezone, geolocation, transparent backgrounds, resizing, caching, asynchronous jobs, webhooks, and bulk capture up to 100 URLs per call. It accepts the parameter names used by other screenshot APIs, which can simplify migration.
Before capture it accepts cookie/consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server exposes take_screenshot, get_page_info, and capture_pdf to Claude, Cursor, and other MCP clients.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →See the ScreenshotNeo documentation for all parameters. This cURL request captures a WebP:
Best Value
- 【INTEGRATED SPEAKERS】Whether you're at work or in the midst of an intense gaming session, our built-in speakers provide rich and seamless audio, all while keeping your desk clutter-free.
- 【EASY ON THE EYES】 Protect your eyes and enhance your comfort with Blue-Light Shift technology. This feature reduces harmful blue light emissions from your screen, helping to alleviate eye strain during long hours of use and promoting healthier viewing habits.
- 【WIDEN YOUR PERSPECTIVE】Our sleek minimal bezel design ensures undivided attention. The nearly bezel-free display seamlessly connects in a dual monitor arrangement, delivering an unobstructed view that lets you focus on more at once, completely distraction-free.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
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)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}`);The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is included on every plan. Create a free ScreenshotNeo account.
FAQ
Does setting the same viewport guarantee identical dimensions?
No. Capture mode, clipping, DPR, zoom, and output scaling remain independent of the CSS viewport.
Should I multiply the viewport by DPR myself?
Usually no. Configure the renderer’s device scale and measure the resulting bitmap. Manual multiplication can double-apply scaling when the capture tool already handles DPR.
What is the best first test page?
Use a small deterministic HTML fixture with fixed-size blocks and locally available fonts and images. Once geometry agrees there, test the production URL and investigate loading or engine-specific behavior.
The Bottom Line
Match viewport, capture mode, clip, scale, and timing; measure the actual bitmap; then treat any remaining difference as a rendering-engine or page-content issue.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
