Why viewport dimensions trip up even experienced developers
A responsive layout that looks perfect on your 1440px monitor breaks on a colleague's 1366px laptop. A mobile design tested in Chrome DevTools at 375px renders differently on an actual iPhone with a 3x device pixel ratio. These discrepancies happen because CSS pixels, physical pixels, and viewport dimensions are three different things, and confusing them leads to blurry images, incorrect media queries, and layouts that overflow their containers.
The device pixel ratio (DPR) is the multiplier between CSS pixels and physical screen pixels. On a standard 1x display, they are identical. On a 2x Retina display, each CSS pixel maps to a 2x2 grid of physical pixels. On a 3x mobile display, it is a 3x3 grid. If you are serving images at 1x resolution to a 2x display, they look blurry. If your media queries target physical pixels instead of CSS pixels, they fire at the wrong widths. This inspector shows both values simultaneously so you can see exactly what the browser is working with.
The Tailwind breakpoint badges add another layer of utility. Instead of mentally translating `1024px` to `lg` and checking whether your current width crosses that threshold, the inspector lights up the active breakpoints in real time. Resize your browser and watch the badges change — it is the fastest way to verify which Tailwind utility classes are currently in effect.
Measurements and breakpoints displayed
| Measurement | Source | Example |
|---|---|---|
| Viewport width | window.innerWidth | 1440 |
| Viewport height | window.innerHeight | 820 |
| DPR | window.devicePixelRatio | 2 |
| Physical width | width x DPR | 2880 |
| Physical height | height x DPR | 1640 |
| Orientation | width vs height | Landscape |
| sm | 640px | Active / Inactive |
| md | 768px | Active / Inactive |
| lg | 1024px | Active / Inactive |
| xl | 1280px | Active / Inactive |
| 2xl | 1536px | Active / Inactive |
How to inspect your viewport
Open the tool and read your current viewport width and height from the main card — these are CSS pixels, the units used in all your layouts and media queries
Resize your browser window or rotate your mobile device — all values update in real time with no interaction required
Check the Tailwind breakpoint badges to see which of the five standard breakpoints (sm, md, lg, xl, 2xl) are currently active
Click any value to copy it to your clipboard — useful for pasting dimensions into CSS, config files, or bug reports
Testing responsive behavior with the inspector
Open a site you are developing in one tab and the viewport inspector in another. Resize your browser from 1600px down to 320px and watch the breakpoint badges change. At 1536px, `2xl` deactivates. At 1280px, `xl` deactivates. At 1024px, `lg` deactivates. Verify that your layout responds at each breakpoint — does the sidebar collapse at `lg`? Does the navigation switch to a hamburger at `md`? The inspector tells you exactly where each transition should occur.
On mobile, rotate your device from portrait to landscape and observe the orientation indicator change along with the width and height values. The breakpoint badges should update accordingly — a phone in portrait might be below `sm`, while the same phone in landscape might activate `sm` or even `md` depending on the device width.
CSS pixels vs. physical pixels in practice
CSS pixels are the logical units that all your stylesheets, media queries, and JavaScript measurements use. When you write `max-width: 1024px`, that is 1024 CSS pixels. Physical pixels are the actual hardware dots on the screen. The browser maps CSS pixels to physical pixels using the device pixel ratio. On a 2x display, a 100px CSS element is rendered using 200 physical pixels in each dimension, giving it four times the pixel density and a sharper appearance.
This distinction matters most for images and canvas rendering. If you set an image to `width: 300px` in CSS but the source file is only 300px wide, it will look sharp on a 1x display but blurry on a 2x display. For sharp rendering at 2x, you need a 600px source file displayed at 300 CSS pixels. The inspector's physical pixel readout helps you determine exactly what resolution your assets need to be.
Who uses a viewport inspector
Frontend developers building responsive layouts who need to verify breakpoint behavior without opening DevTools
Designers converting Figma mockups to code who need to confirm the CSS pixel dimensions match their design specs
Mobile developers testing orientation changes and verifying that layouts adapt correctly between portrait and landscape
QA engineers documenting browser dimensions in bug reports by clicking to copy the exact values
Tailwind CSS users who want a live visual indicator of which breakpoint utilities are currently active
Frequently asked questions
Q: What is the difference between CSS pixels and physical pixels?
A: CSS pixels are the logical units used in layout; physical pixels are the actual screen dots. On a 2x DPR display, 1 CSS pixel equals a 2x2 grid of physical pixels.
Q: Which Tailwind breakpoints are shown?
A: sm (640px), md (768px), lg (1024px), xl (1280px) and 2xl (1536px) — the standard Tailwind v3 defaults.
Q: Does it work on mobile?
A: Yes — rotate your device to see orientation change. The current breakpoint badge will update accordingly.
Q: Does the viewport height include the browser address bar?
A: It shows `window.innerHeight`, which excludes the browser chrome on desktop. On mobile, the visible area changes when the address bar hides on scroll, and the value updates accordingly.
Q: Can I use this for testing media queries?
A: Yes — resize your browser to the exact pixel width of a media query breakpoint and confirm whether your layout responds as expected.
Inspect your viewport now
See live dimensions, DPR, and Tailwind breakpoints with the Viewport Inspector. Check your network identity with My IP Address. Decode server responses with the HTTP Status Codes Reference. Test patterns with the Regex Tester or generate unique IDs with the UUID Generator.
