Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

The reliable way to test a responsive website is to combine continuous viewport resizing, checks at representative width-and-height combinations, interaction testing, an accessibility reflow check at 320 CSS pixels, repeatable Playwright runs, and selective real-device verification. A screenshot at one phone preset is evidence of only that one emulated state—not proof that every browser, engine, or device works.

1. Start with pages, states, and user tasks

Do not test only the home page after its initial load. Choose representative templates and the actions users must complete. Include:

  • Navigation, menus, drawers, and sticky headers.
  • Forms with validation messages, date pickers, and keyboards.
  • Dialogs, cookie notices, tooltips, accordions, and expanded sections.
  • Tables, charts, code blocks, cards, and long headings.
  • Authenticated, empty, error, loading, and content-rich states.

Exercise controls at the widths where the layout changes. A static image can look correct while a menu cannot be opened, a focused field is hidden behind a sticky header, or an expanded panel overflows.

2. Explore breakpoints continuously in browser tools

Chrome DevTools procedure

  1. Open the page in Chrome, then choose More tools → Developer tools (or press F12).
  2. Toggle the device toolbar with Ctrl+Shift+M on Windows/Linux or Command+Shift+M on macOS.
  3. Drag the viewport edge slowly from a wide desktop width to a narrow mobile width. Watch for the exact point at which text wraps, columns stack, navigation changes, or controls disappear.
  4. Record the transition widths and test just above and below each one. These are more useful than relying only on named device presets.
  5. Repeat with a short viewport height. A 390-pixel-wide, short window can reveal a fixed header, dialog, or bottom action bar that a tall phone preset hides.

Include intermediate widths, a constrained desktop window, and both small and large layouts. The browser is emulating viewport and device settings; it is not reproducing every physical screen or browser engine.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

3. Use a width-and-height test matrix

There is no universal official device list for responsive design. Build a small matrix from your audience, breakpoints, and risk. A practical starting set is:

#1 Best Overall
MNN 15.6" FHD 60Hz Portable Monitor USB-C HDMI IPS HDR Gaming Laptop
  • Full HD Portable Monitor - MNN 15.6inch portable laptop monitor with 1920*1080 resolution, advanced IPS glossy screen support 178° full viewing angle, it renders accurate and bright color, draws you into the video or game with lifelike colors and amazing detail.It can effectively reduce blue light radiation damage, no flickering, eye-care, and make it easier to watch for a long time.A second monitor for working from home.
  • Double Type-C Port -For Plug & Play, the MNN monitor provides 2 Full Feature Type-C ports. Only One USB Type-C Cable is required to connect to the power supply & display signal transmission. NOTE: Your device should support thunderbolt 3.0 or USB 3.1 Type C DP ALT-MODE.which supports multiple connect ways to your laptops, PC, Phones, Macbooks, PS5/PS4, Xbox, and Switch.
  • Lightweight Ultra Slim for Travel - As a portable external monitor,MNN portable laptop monitor easily accommodate to every suitcase and backpack and stress-free when you are holding it for a long time. They are truly portable computer monitors for travelers, students, gamers,engineers, and everyone.
  • Give consideration to work and games - through multiple display modes [Copy Mode/Extended Mode/Second Screen Mode/Portrait Mode], we can bring you a clear second screen in the meeting, and expand the screen anytime and anywhere to improve work efficiency and improve the quality of life. Adjusting to HDR mode can upgrade the image to a new level, providing you with brighter highlights,deeper and more realistic colors, more realistic images, and amazing viewing/gaming experience.
  • Powerful Smart Cover - MNN portable external monitor can work in both landscape and portrait mode, can be used as a gaming monitor, screen extender for laptop or phone. Comes with a scratch-proof smart cover made of durable PU leather exterior, doubles as a stand, provides comprehensive protection for this portable computer monitor.
Case What it exposes How to use it
Narrow, short viewport Fixed headers, dialogs, sticky controls, clipped content Resize both dimensions and operate every overlay
Narrow, tall viewport Mobile reflow and long-page scrolling Complete primary tasks from top to bottom
Intermediate width Breakpoint gaps, awkward wrapping, partially collapsed navigation Test around every observed transition
Constrained desktop Sidebars, tables, and two-column layouts that assume a large monitor Drag a desktop window narrower instead of jumping to a phone preset
Large desktop Excessive line length, stretched media, and misplaced max-width containers Check readability and alignment at the largest supported width

Capture the dimensions, browser, page state, and result for each case. Keep the matrix risk-based: a checkout flow, dashboard, or data table deserves more combinations than a static marketing page.

4. Inspect visual and functional failure modes

Content and geometry

  • Text is clipped, overlaps another element, or becomes unreadable after wrapping.
  • Images, video, canvas, or embedded frames are distorted or extend beyond their container.
  • A horizontal scrollbar appears unexpectedly, including one caused by a single off-screen element.
  • Long words, URLs, translated strings, or user-generated content break the layout.
  • Margins, columns, and alignment change inconsistently at a breakpoint.

Interaction and keyboard behavior

  • Every control remains reachable and has a usable replacement when desktop navigation collapses.
  • Menus, forms, dialogs, and accordions open, close, and scroll within the available viewport.
  • The focused element is visible and not covered by a sticky header or footer.
  • Touch targets have enough space to activate without hitting neighboring controls.
  • Content and functionality remain available after rearrangement; a visual change must not silently remove an action.

Test with real content, not only short placeholder labels. Expand sections, submit invalid forms, rotate the viewport when possible, and repeat after zooming text or changing browser settings.

5. Perform the accessibility reflow check

WCAG 2.1 Success Criterion 1.4.10 describes reflow for vertically scrolling content at a width equivalent to 320 CSS pixels. Applicable content should work without two-dimensional scrolling and without loss of information or functionality, except where a two-dimensional arrangement is essential to the content’s use or meaning. The criterion also gives a 256 CSS pixel height equivalent for horizontally scrolling content. These are CSS viewport equivalents, not instructions to buy a display with exactly those physical pixel dimensions.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
  1. Set the browser’s CSS viewport width to the equivalent of 320 pixels.
  2. Scroll through every important page state, including errors, open menus, dialogs, and expanded content.
  3. Verify that reading order, controls, labels, focus visibility, and information remain available.
  4. Identify intentional exceptions, such as a complex data table whose two-dimensional presentation is essential, and provide an understandable alternative where appropriate.

WCAG editions and legal requirements can differ by project and jurisdiction. Use the currently applicable standard when making a formal conformance claim; the dimensions above describe the cited WCAG 2.1 reflow guidance.

Rank #2
InnoView Portable Monitor, 15.6 Inch FHD 1080P HDMI USB C Second External Monitor for Laptop, Desktop, MacBook, Phones, Tablet, PS5/4, Xbox, Switch, Built-in Speaker with Protective Case
  • [Portable Monitor Laptop] InnoView laptop screen extender is no need of app and drivers! 15.6 in is a more suitable size for traveling or remote work. Suitable for traveler, student, gamer, engineer, and white-collar worker to connect HP laptop, Lenovo laptop, Dell laptop, Asus laptop, Macbook, iPhone, game console, tablet, PS, Xbox, etc. The laptop screen can expand the viewing area and be more efficient when playing games, working, meeting and studying
  • [Plug and Play] The travel monitor for laptop provides 2 full-function Type-C ports and 1 HDMI port to connect most devices. Only one USB-C cable is needed to connect the external display to computer, and it supports power pass-through reverse charging. Note: Your device should support Thunderbolt 3.0/4.0 or USB 3.1 Type-C DP ALT-MODE. If not, you can connect via HDMI and power cable(NOT INCLUDE IN THE PACKAGE)
  • [IPS FHD USB C Monitor] 15.6 inch portable screen with a resolution of 1920*1080P, made of A+ IPS screen, supports 178° full viewing angle, can present accurate and vivid colors. Combined with HDR, images and videos present realistic colors and amazing details. Low blue light can effectively reduce blue light radiation damage, no flicker, eye protection, making it easier for you to work and perform multiple tasks at the same time
  • [Versatile Cover and Stand] Equipped with a scratch-resistant smart protective cover made of durable PU leather, it can also be used as a stand when working. Two grooves are used to adjust the angle and fix the external monitor. It can also provide all-round protection for the 1080p monitor when going out or traveling, suitable for putting in a backpack to avoid squeezing. Optional landscape and portrait modes, save more desktop space
  • [Worry-free Purchase] Since the output power of each device is different, the screen may flicker or restart. You can power the laptop monitor to solve it. Provide a 30-day return policy and 18-month warranty (excluding external force damage). If you have any concerns, please let us know (displayed on the back of the monitor)

6. Automate repeatable checks with Playwright

Playwright can set viewport dimensions in a browser context or test project. Device profiles can also emulate screen settings, user agent, and touch support. Use automation for stable page states and assertions, while retaining manual checks for exploratory resizing and complex interaction.

Minimal viewport test

import { test, expect } from '@playwright/test';

const sizes = [
  { name: 'narrow', width: 320, height: 700 },
  { name: 'mobile', width: 390, height: 844 },
  { name: 'tablet', width: 768, height: 1024 },
  { name: 'desktop', width: 1440, height: 900 }
];

for (const size of sizes) {
  test(`layout works at ${size.name}`, async ({ browser }) => {
    const context = await browser.newContext({ viewport: size });
    const page = await context.newPage();
    await page.goto('https://example.com', { waitUntil: 'networkidle' });
    await expect(page.locator('body')).toBeVisible();
    await expect(page.locator('main')).toBeVisible();
    await page.screenshot({ path: `artifacts/${size.name}.png`, fullPage: true });
    await context.close();
  });
}

Replace the URL and selectors with your application. Add assertions for navigation visibility, form completion, dialog behavior, and the absence of unintended horizontal overflow. Screenshot comparison is useful when the page is deterministic, but assertions should cover functionality that pixels cannot prove. Keep tests tied to named states, such as “menu open” or “validation error shown,” rather than taking only an initial-load image.

When to use a device profile

A Playwright device descriptor is useful when touch support, user-agent-dependent behavior, or screen settings affect the page. It remains emulation: it does not establish coverage across all physical hardware, operating systems, browser engines, font rasterizers, or browser chrome.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

7. Decide when a real device is necessary

Use emulation for fast breakpoint exploration and repeatable automated checks. Add a real phone or tablet when risk justifies it, especially for:

Rank #3
Sale
KYY Portable Monitor 15.6" 1080P Computer Monitor Screen Extender w/Cover
  • [ FHD 1080P PORTABLE MONITOR ]: KYY using a 15.6''(8.8"x14.2") advanced IPS screen with 178° wide viewing angle, Delivers 1920*1080 breathtaking viewing quality and HDR technology, KYY portable gaming monitor has excellent color rendering ability, provide you the clearer, smooth, excellent performance in gaming/multimedia. It can effectively reduce blue light radiation damage, no flickering, eye-care, and make it easier to watch for a long time
  • [ WIDE COMPATIBILITY ]: KYY portable monitor for laptop equipped with 2 Full Function Type-C ports and Mini-HDMI port, easy access to your favorite devices with 1 cable solution as long as your device support Thunderbolt 3 or 3.1 USB-Type-C, compatible with most laptop, smartphone, PC, PS4, XBOX and more.
  • [ ULTRA-SLIM PORTABLE DISPLAY ]: KYY USB C portable monitor features a 0.3inch ultra-slim profile(1.7lb), it is easy to slides into your bag, allows you to carry it everywhere, ideal for a simple on-the-go dual-monitor setup or extend your phone screen for movies or games. No driver needed and equipped with 3.5mm audio inputs and 2 built-in stereo speakers to enhance entertainment experience
  • [ DURABLE SMART COVER ]: Comes with a scratch-proof smart cover made of durable PU leather exterior, doubles as a stand, provides comprehensive protection and frameless magnetic design for this portable computer monitor. There are two grooves in the cover base to give at least some choice of viewing angle for your comfort for less cumbersome installation
  • [ LIGHTWEIGHT BUT POWERFUL ]: KYY portable external monitor can work in both landscape and portrait mode, can be used as a gaming monitor, screen extender for laptop or phone. It has a unique designed Premium gray metal appearance, 2 built-in speakers to play audio, a friendly menu control wheel for setting, and 24/7 professional support team
  • Touch gestures, scrolling momentum, virtual keyboards, and hit-target behavior.
  • Font rendering, browser chrome, safe areas, camera or sensor integrations, and orientation changes.
  • A high-value audience platform or a browser engine your emulation does not cover.

Try a phone already available to your team before purchasing hardware. One real device improves confidence in that device; it cannot represent every screen size or browser platform. For broader coverage, evaluate a cross-browser/device service by its actual browser and operating-system matrix, touch support, repeatability, workflow, and cost rather than assuming that a larger device list means complete coverage.

8. Capture evidence without polluting the page

For manual reviews, save the viewport dimensions, browser, URL, state, and a screenshot alongside the defect description. A screenshot should support a reproducible report, not replace a functional test. If consent banners, newsletter popups, or chat widgets obscure the layout, record whether they are part of the user experience you intend to test or noise that should be removed for visual comparison.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server for developers. It accepts a URL in one GET request and returns PNG, JPEG, WebP, or PDF. Before capture it accepts cookie/consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing result.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Use the ScreenshotNeo documentation for the full option list. This is a capture service, so it complements rather than replaces interaction tests: use Playwright or a real device to operate controls, then use clean captures for repeatable visual evidence.

cURL

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

Python

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}`);

Relevant options include full-page capture with lazy images loaded; CSS-selector element capture; dark mode; 12 device presets or any viewport; retina scale; PDF paper size, margins, landscape, and page ranges; HTML/CSS-to-image; custom CSS and JavaScript; click-before-capture; hidden selectors; waits for a selector, delay, or network idle; blocking ads, trackers, requests, or resource types; custom headers, cookies, user agent, Authorization, timezone, and geolocation; transparent backgrounds; image resizing; chosen cache TTL; signed public image links; asynchronous jobs with signed webhooks; bulk capture of up to 100 URLs per call; a usage API; an OpenAPI specification; and compatibility with parameter names used by other screenshot APIs.

Plan Included shots Price
Free 1,000 per month $0, no card
Starter 3,000 $5
Growth 15,000 $15
Pro 60,000 $39
Scale 250,000 $99
Business 1,000,000 $249

Yearly billing gives two months free, and every feature is available on every plan. For a visual regression pipeline, choose a cache TTL deliberately, wait for a stable selector or network idle, and inspect X-Page-Verdict and X-Billed so failed loads are distinguishable from successful captures.

Rank #4
Anyuse 15.6" FHD IPS USB-C HDMI Portable Monitor
  • 15.6" FHD Portable Monitor - Featuring a 1920*1080P resolution, 178°FULL viewing angle, HDR, and Low Blue Light Super Clear IPS A-grade screen, this Anyuse portable screen for laptop enhanced visual experience, reduces eye strain and fatigue.
  • Double Type-C Port -For Plug & Play - Anyuse portable monitor features 2 full-featured Type-C ports and 1 MINI HDMI port. You can easily access your favorite devices with just one USB Type-C or MINI HDMI cable. NOTE: Your device should support Thunderbolt 3.0/4.0 or USB 3.1 Type C DP ALT-MODE.
  • Portable & Light Weight - At just 1.37lbs and 0.04 inch thin, this portable laptop monitor is ultra-portable and perfect for on-the-go productivity or gaming. flexible to use anywhere you need a second screen for laptop. bringing you efficiency for meetings, work from home, and presentations.
  • Able to Balance Work and Play - With multiple display modes [copy mode/extension mode/second screen mode]. During meetings,it can copy your laptop's content as a second screen to share with others.At work, it can be used as a second extended screen to increase productivity. In life, adjusting to HDR mode can upgrade the image to a new level, providing you with brighter highlights, more realistic colors and images.Two built-in speakers provide an amazing viewing and gaming experience.
  • Wide Compatibility - Enjoy hassle-free plug-and-play functionality with the portable monitor. it is compatible with all devices equipped with HDMI and USB Type-C ports like laptops, PS, XBOX, SWITCH game consoles, No app or driver installation required.

Create a free ScreenshotNeo account to get 1,000 screenshots a month with no card. Paid plans start at $5 for 3,000 shots.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

9. Troubleshooting common failures

The page has horizontal scrolling

Use DevTools to reduce the viewport until the scrollbar appears, then inspect unusually wide children, fixed pixel widths, transforms, long unbroken strings, and third-party embeds. Fix the offending component rather than hiding overflow on the entire page, which can conceal inaccessible content.

A menu or dialog is cut off

Reproduce it at a short height as well as a narrow width. Check fixed positioning, containing blocks created by transforms, internal scrolling, focus movement, and a usable close control. Ensure the focused item remains visible.

The automated screenshot is blank or inconsistent

Wait for a meaningful selector or application-ready signal instead of an arbitrary short delay. Stabilize animations, use deterministic test data, and capture after the relevant interaction. Network idle alone may not mean that client rendering has finished.

Best Value
VILVA 15.6" FHD IPS USB-C HDMI Portable Monitor
  • Experience Unrivaled Visuals: Get the ultimate viewing experience with the VILVA Professional Portable Monitor! With its incredibly sharp 15.6 inch FHD IPS Screen, you'll get a 1920 x 1080 resolution that viewing experience. Get it now and start working smarter, not harder and get yourself the professional portable monitor today.
  • Truly Wide Compatibility: Lets you connect your laptop, PC, MAC, tablet, phone, XBOX, PS3/PS4/PS5, switches, and more via USB-C or HDMI Port-- deliver a stable connection and steady data transmission. Enjoy great sound with the built-in dual stereo speakers, perfect for your business trip, travel, or home entertainment gaming setup.
  • Durable Smart Cover: VILVA portable monitor has a high quality and durable metal material, which makes it shows a fine metal texture and high strength. Has magnetic leather smart cover that provides protection for the entire screen and easy to stand the portable monitor.
  • Look no further!: Get this portable monitor right Now, complete with magnetic cover, USB-C to USB-C cable, Mini HDMI to HDMI cable.

The emulated result passes but a phone fails

Compare browser engine, operating system, font availability, touch events, viewport units, safe-area behavior, and browser chrome. Add a real-device check for that risk; do not treat one emulation profile as proof of universal compatibility.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

The 320-pixel check is impossible for a table

Determine whether the two-dimensional presentation is essential. If it is, document the applicable exception and provide an accessible way to obtain the same information; do not simply remove columns or force illegible text.

10. A repeatable release checklist

  • Representative templates and important interactive states are listed.
  • Viewport width was dragged continuously and breakpoints were tested on both sides.
  • Short and tall heights, intermediate widths, constrained desktop, and large desktop were checked.
  • Text, media, overflow, focus, forms, menus, dialogs, and navigation were exercised.
  • The 320 CSS pixel reflow condition was reviewed, with exceptions documented.
  • Playwright checks cover stable states at named dimensions.
  • At least one real browser/device is used where touch, rendering, or platform risk warrants it.
  • Evidence records dimensions, browser, state, URL, and expected versus actual behavior.

FAQ

Is testing three phone presets enough?

No. Continuous resizing and intermediate widths find breakpoint failures that named presets can miss.

Does a 320-pixel test mean a 320-pixel physical phone is required?

No. The WCAG value refers to a CSS viewport equivalent.

Can screenshots prove that a form works?

No. Pair visual evidence with interaction assertions or manual task completion.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Should every project buy a device lab?

No. Start with emulation and automation, then add real devices according to audience and risk.

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.