← All Tools
Responsive Screen Tester🔒 100% local
Test viewport sizes. Privacy-first, no server uploads, no tracking.
Related Tools
Takes a viewport width and reports which CSS breakpoints are active at that size, which Tailwind prefixes apply, the ready-made media queries for that exact pixel value, the three closest real device sizes, and a short checklist of what to inspect. Nothing is rendered and no page is loaded; the number you type is matched against tables baked into the script.
How to use it
- Type a width in pixels, for example 390.
- Press Process. The report starts with the width, the device it matches and a class label, then lists breakpoints, media queries and nearby devices.
- Use Copy Output to keep the report, or Clear to empty both boxes.
Worked example
390becomesTesting width: 390px (iPhone 14)
Class: mobile Suggested content columns: 1
Active min-width breakpoints at 390px:
none - you are below every breakpoint
Next breakpoint up: 640px sm (Tailwind) (250px away)
Tailwind prefixes that apply: (none - base styles only)
Media queries for this width:
@media (max-width: 389px) { /* below this width */ }
@media (min-width: 390px) { /* this width and up */ }
@media (min-width: 390px) and (orientation: landscape) { /* landscape phones */ }
Device sizes near this width:
iPhone 14 390 x 844 @3x
iPhone SE 375 x 667 @2x
Pixel 7 412 x 915 @2.625x
Check at this width:
- horizontal scroll (the #1 symptom of an overflowing element - look for a fixed width or a long unbreakable string)
- tap target size (>= 44x44 CSS px)
- text legibility without zoom (>= 16px body)
- sticky headers eating vertical space
- mobile-only: address-bar resize, safe-area insets on notched devicesReproduced in Node with the tool's own tables. The single bullet characters the page prints are shown here as hyphens.
iPhone 14becomesWidth must be between 100 and 10000 px.A real result, not a typo. Device names do not work as input: the width parser grabs the first 2-to-5 digit run, so 'iPhone 14' becomes width 14 and is rejected.
When to use it
- Deciding which breakpoint a fixed-width screenshot sits above or below before filing a layout bug.
- Getting the exact min-width and max-width media query values for a one-off width instead of doing the arithmetic by hand.
- Checking what the next Tailwind prefix up from a given viewport is when a class seems not to apply.
What it does not do
- It is a reference table, not a live preview. No iframe, no page load, no resize handle; you still have to test the real layout in a browser.
- Device-name input is broken. 'iPhone 14' and 'iPhone 14 Pro Max' parse the leading 14 and fail the 100-10000 range check, while 'Pixel 7' has no two-digit run and reports that no width was found.
- A width outside 100 to 10000 px is refused outright, so fractional widths such as 412.5 are floored to the digits found and there is no handling for zoomed or DPR-scaled viewports.
- The breakpoint list is fixed to Tailwind and Bootstrap defaults. Custom or container-query breakpoints are not represented.