Loading Techie Utils…

Responsive Viewport Tester

Render your markup at phone, tablet and desktop widths. Free, and runs entirely in your browser — nothing you enter is uploaded or stored.

About Responsive Viewport Tester

Your markup, rendered in real browser frames at several widths at once. Each frame is an actual viewport, so media queries, container queries, dvh units and text wrapping behave exactly as they would on a device of that size — this is the browser laying the page out, not a picture of one.

Resizing a desktop window is not the same test, and the difference matters. A narrow window on a laptop still reports a laptop's device-pixel ratio, a mouse pointer, and hover support, so @media (hover: hover) and (pointer: coarse) resolve the wrong way. What a narrow window does test is the layout, and seeing three widths side by side is faster than dragging an edge and trying to remember what the last one looked like.

Everything is sandboxed with no permissions at all: scripts do not run, forms cannot submit, and nothing can reach out of the frame. That makes this safe for markup pulled out of somebody else's page, and it also means a fragment that depends on JavaScript to lay itself out will not lay itself out here.

Where it helps

  • Real viewports, so media queries, container queries and dvh resolve exactly as they do on a device.
  • Several widths side by side, which is the comparison a single resizable window cannot give you.
  • Each frame is sandboxed with no permissions, so pasted markup cannot run scripts or reach anything.
  • Names the Tailwind and Bootstrap breakpoint in force at each width, which is usually the number you are reasoning about.
  • A minimal reset is available so a fragment is judged on its own layout rather than the browser's default margins.
  • Runs entirely in your browser — the markup is never sent anywhere.

Limits

  • Markup only. A live URL is not loaded: nearly every site refuses to be framed, and fetching one would mean your browser making a request to somebody else's server, which this tool does not do.
  • Scripts are blocked, so anything laid out by JavaScript — a carousel, a virtualised list, a framework that renders on the client — will not appear.
  • It is not a device. Touch targets, the on-screen keyboard, the notch, and a phone's real pixel density are all absent.
  • The frames are scaled down to fit, so anything sub-pixel — hairline borders, tight letter-spacing — is not rendered at the size a phone would draw it.
  • External stylesheets, fonts and images referenced by the markup will not load inside the sandbox; inline what the fragment needs.

Frequently asked questions

Can I test a URL instead of pasting markup?

No, and not by oversight. Most sites send X-Frame-Options or a frame-ancestors policy that refuses framing outright, so the result would be a blank box for the majority of addresses — and loading one would mean your browser fetching a third-party page, which is the one thing a locally processed tool should not quietly do.

Why does my JavaScript not run?

Each frame is sandboxed with no permissions at all, which blocks scripts along with forms, popups and same-origin access. That is what makes pasting somebody else's markup safe. Test script-driven layout in a real page instead.

Is this the same as my browser's device toolbar?

It is the same idea with a different trade-off. Devtools emulates one device at a time and can fake touch, pointer type and pixel ratio; this shows several widths at once and fakes nothing. Use this for layout, devtools for interaction.

Which widths should I actually check?

320px, because it is the narrowest phone still in use and where things break first; something around 390px, which is the common modern phone; 768px for tablets and the point most frameworks switch at; and one desktop width. Everything between those is interpolation.

Related tools

More Web Development tools

  • HTML Formatter — Indent and tidy HTML markup
  • CSS Formatter — Format stylesheets with consistent indentation
  • JavaScript Formatter — Re-indent JavaScript and TypeScript source
  • SCSS/SASS Formatter — Format SCSS syntax and nested rules
  • TypeScript Formatter — Format TypeScript source code
  • SQL Formatter — Format SQL statements with dialect selection
  • SQL Minifier — Collapse formatted SQL into compact text
  • CSS Unit Converter — px, rem, em, percentages and viewport units, with a preview
  • Query String Parser and Builder — Convert query strings into editable key-value data
  • CSP Generator — Build a Content-Security-Policy, or check one, and write it for your server or framework
  • CORS Generator — Write CORS configuration for nginx, Express, Go, Django, ASP.NET, Spring and more, and test an origin against it
  • cURL Builder — Build an HTTP request and get it as curl, JavaScript, TypeScript, Go, Python, PHP, C#, Java and more
  • Minifier — Shrink CSS, HTML or JavaScript
  • Flexbox Playground — Try every flex property and read the CSS back
  • CSS Grid Playground — Build a grid template and see the tracks it makes
  • SVG Path Viewer — Draw path data and read back what it contains
  • SVG to CSS Converter — Turn an SVG into a data URI for CSS or an img tag
  • OAuth 2.0 / OIDC Helper — PKCE verifiers and challenges, state, nonce, and checking what came back
  • Regex Tester — Test patterns, inspect groups and preview replacements
  • User-Agent Parser — Identify the browser, engine, operating system and device behind a User-Agent string
  • HTTP Status Codes — Look up what a status code means, when to send it, and whether it is cached or safe to retry
  • HTML to JSX — Convert HTML and SVG markup into JSX for React, with styles, attributes and whitespace handled
  • Semver Checker — Test versions against npm ranges, sort them by precedence, and see what each bump produces
  • Cookie Parser and Builder — Read Set-Cookie and Cookie headers, check them against browser rules, and write one for your framework