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 →Use your browser’s developer tools as a website screen size simulator. Chrome DevTools Device Mode and Firefox Responsive Design Mode let you enter any viewport width and height, switch orientation, inspect CSS breakpoints, and capture a preview without buying a separate device. Test the viewport—the CSS layout area—not merely a phone’s advertised hardware resolution.
What a website screen size simulator actually measures
A simulator changes the browser viewport, the rectangular CSS area in which your page lays out. Width is usually the most important value because media queries commonly change navigation, columns, typography, spacing, and controls at particular widths. Height helps you inspect above-the-fold composition, sticky elements, dialogs, and long-page behavior.
A preset named for a phone or laptop is only a convenient sample. Responsive design should remain usable at widths you did not explicitly list. Flexible grids, wrapping content, fluid images, and content-driven breakpoints are more robust than creating a pixel-perfect layout for every device model.
CSS pixels versus physical pixels
A handset’s panel resolution is measured in physical pixels. CSS uses logical pixels. Chrome defines device pixel ratio (DPR) as the ratio between physical screen pixels and CSS pixels. A high-density screen can therefore have many physical pixels while exposing a much smaller CSS viewport. When documenting a test, record the CSS width and height, DPR, orientation, and browser—not just a marketed resolution.
Breakpoints are behavior changes
Media queries apply styles when a viewport or another environment feature matches a condition. A breakpoint is the point at which your content needs a different arrangement. Do not assume a universal list of “mobile” and “desktop” widths: resize continuously and place breakpoints where your navigation, cards, tables, or forms actually become crowded.
#1 Best Overall
Chrome DevTools: simulate any screen size
- Open the page in Google Chrome.
- Open DevTools with F12, Ctrl+Shift+I on Windows/Linux, or Command+Option+I on macOS.
- Enable Device Mode by selecting the phone/tablet icon in the DevTools toolbar, or press Ctrl+Shift+M (Windows/Linux) or Command+Shift+M (macOS).
- In the responsive toolbar, choose Responsive and enter a width and height. You can also drag the viewport handles to discover the exact width where a layout changes.
- Reload after changing settings when JavaScript or server-side rendering chooses markup from the initial viewport.
Chrome’s current documentation lists these presets: Mobile S (320px), Mobile M (375px), Mobile L (425px), Tablet (768px), Laptop (1024px), Laptop L (1440px), and 4K (2560px). They are starting points, not universal standards; add a custom device whenever your audience or bug report requires another size.
Inspect media-query breakpoints
Open the three-dot DevTools menu, choose More tools, then Rendering if the rendering panel is not visible. In Device Mode, enable the media-query bars. The bars show min-width and max-width thresholds; selecting one jumps the viewport to that boundary. Inspect the stylesheet declaration to find the corresponding @media rule, then resize a few pixels on either side to verify the transition.
Test orientation, DPR, and device type
Use the rotate control to compare portrait and landscape. Chrome also exposes device-type and DPR controls. Orientation is a media feature, so a layout can change even when width remains similar. Touch emulation can reveal hover-dependent controls, but it does not reproduce every browser gesture or hardware behavior.
Capture evidence
Use DevTools’ screenshot command or your operating system’s capture tool after setting the exact viewport. Include the URL, CSS dimensions, DPR, orientation, browser version, and the breakpoint under investigation in the bug report.
Firefox Responsive Design Mode
- Open the page in Firefox and open Developer Tools.
- Choose Responsive Design Mode from the Developer Tools menu.
- Enter custom width and height values or drag the viewport handles.
- Choose a device preset only as a convenience, then test nearby widths and both orientations.
MDN documents Responsive Design Mode as a way to simulate device widths and explains how width-based media queries drive responsive changes. The same workflow applies: identify where content fails, locate the matching media-query rule, and retest around the threshold.
A repeatable responsive-testing workflow
1. Establish the page’s baseline
Test a wide desktop viewport, a narrow phone width, and an intermediate tablet width. Check navigation, headings, body text, images, tables, forms, dialogs, fixed headers, and horizontal scrolling before changing CSS.
2. Sweep through the range
Drag the viewport gradually instead of checking only presets. Record the first width at which a line wraps badly, a button overlaps, a card becomes too narrow, or content overflows. That failure width is evidence for a content-driven breakpoint.
Recommended Free Tools
3. Check height-dependent problems
Use short and tall viewports. Look for dialogs that cannot scroll, sticky bars covering form fields, footer controls below an unexpected fold, and lazy-loaded content that appears only after scrolling.
4. Verify orientation and input assumptions
Rotate the viewport and inspect menus, media, tables, and charts. Test keyboard focus and visible focus indicators. If a control appears only on hover, make sure it remains usable with touch or keyboard input.
5. Inspect the source and computed layout
Use the Elements and Computed panels to find fixed widths, minimum widths, overflowing children, and the active @media rule. A scrollbar is often caused by one child wider than the viewport rather than by the breakpoint itself.
6. Confirm on representative hardware
Chrome’s official documentation cautions: “With Device Mode you don’t actually run your code on a mobile device.” A simulation cannot prove real handset CPU performance, browser rendering, touch behavior, sensor integration, text rasterization, or network conditions. Recheck critical flows on at least one actual iOS or Android device and the browsers your users support.
Fix a mobile layout that never activates
When a narrow layout does not appear, inspect the document head for the viewport metadata element:
<meta name="viewport" content="width=device-width, initial-scale=1">MDN explains that without width=device-width, a mobile browser may use a wider virtual viewport. Your narrow media query then does not match even though the physical screen is small. After adding or correcting the tag, reload the page and inspect the reported CSS viewport width.
Choosing the right kind of screen-size check
| Method | Custom width/height | Breakpoint visibility | Orientation/DPR/input | Runs on real hardware |
|---|---|---|---|---|
| Chrome DevTools Device Mode | Yes | Media-query bars and source inspection | Orientation, DPR and device-type controls; limited emulation | No |
| Firefox Responsive Design Mode | Yes | Inspect with Firefox Developer Tools | Responsive viewport and orientation controls | No |
| Physical phone or tablet | Native screen only | Use browser tools on the device | Actual browser, touch, performance and hardware | Yes |
Use browser tools for fast iteration and arbitrary dimensions, then use real devices for release confidence. A preset does not replace coverage of unknown widths, and a real device does not conveniently cover every possible viewport.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. One request can render a URL at a chosen viewport and return PNG, JPEG, WebP, or PDF. It accepts cookies and consent banners like a visitor, then removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each cleanup step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →For a one-off viewport preview, create an API key and call the endpoint. The parameter names used by other screenshot APIs also work, which can simplify migration. Full options include custom viewport and 12 device presets, retina scale, full-page capture with lazy images loaded, CSS-selector element capture, dark mode, PDF paper settings and page ranges, custom CSS or JavaScript, clicks, selector or network-idle waits, ad/tracker/request blocking, headers, cookies, user agent, Authorization, timezone, geolocation, transparent backgrounds, resizing, selectable cache TTL, signed image links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, usage reporting, and an OpenAPI specification.
cURL
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}`);See the complete parameter reference in the ScreenshotNeo documentation. ScreenshotNeo’s MCP server exposes take_screenshot, get_page_info, and capture_pdf to Claude, Cursor, and other MCP clients, so an AI agent can inspect pages without you wiring a browser. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. Create a free ScreenshotNeo account.
Troubleshooting common simulator results
The page is wider than the viewport
In Elements, find the child extending past the right edge. Check fixed pixel widths, long unbroken strings, wide tables, images without max-width: 100%, and negative margins. Add wrapping or an intentional overflow treatment rather than hiding the scrollbar blindly.
A breakpoint fires at an unexpected width
Search all loaded stylesheets for overlapping min-width and max-width rules. Remember that the scrollbar, zoom level, embedded frame, and browser UI can affect the available CSS width. Inspect the matched rules and source order.
The screenshot differs from the browser preview
Check DPR, zoom, font loading, animation timing, lazy images, cookie state, and viewport height. Wait for a selector or network idle before capture and disable animations in a test stylesheet when visual diffs must be deterministic.
Mobile styles still do not match
Confirm the viewport meta tag, reload after changing it, and test in a real mobile browser. A desktop simulation cannot reproduce every mobile rendering or input detail.
The page appears blank or blocked in an automated capture
Check authentication, robots or bot challenges, required headers, geolocation, and JavaScript timing. With ScreenshotNeo, inspect X-Page-Verdict and X-Billed to distinguish a clean capture from a failed or non-billable response.
FAQ
What width should I use first?
Start with your analytics or reported bug dimensions, then sweep around the failure point. Chrome’s named presets are useful samples, not a complete device list.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteDoes a simulator test website performance?
It can expose layout and some loading behavior, but desktop simulation is not proof of mobile CPU, network, battery, or browser performance. Use real hardware for those questions.
Can I determine my site’s viewport width with JavaScript?
Read window.innerWidth for the layout viewport and compare it with document.documentElement.clientWidth. Record the value alongside DPR and orientation when diagnosing a responsive issue.
Frequently Asked Questions
Should I design separate layouts for every phone model?
No. Use flexible layouts and add breakpoints where content needs to change; device presets are sampling aids.
Is a 1080-pixel phone a 1080-pixel CSS viewport?
Not necessarily. DPR maps physical pixels to logical CSS pixels, so test and document the CSS viewport dimensions.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
When is a real device essential?
When touch behavior, browser-specific rendering, hardware performance, sensors, or mobile-only bugs affect the feature.
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.
