What Is My Viewport Size Checker: Width, Height & DPR
What Is My Viewport Size Checker. Open this viewport size checker to see your Layout Viewport, Visual Viewport and Pixel Ratio live as you resize. Use the free scrollbar width checker online to confirm everything looks correct before you rely on it elsewhere.
Interactive Tool
Your Viewport & Screen Size
Updates live as you resize this window.
Ideal Viewport for Your Screen
Uses your detected screen size and pixel ratio.
The Viewport Size Checker reads your browser's live layout viewport (the box your CSS media queries actually target), your visual viewport (what's actually visible once a mobile URL bar collapses or you pinch-zoom), and your full screen resolution, then lays all three side by side so you can see exactly where they diverge. Resize the window and watch the numbers update on their own, or hit Copy Specs to grab the values for a bug report.
Your What Is My Viewport Size Checker answers one question the moment the page loads: how much room does a web page actually get inside your browser window? It reads the viewport width and viewport height, the inner size left after toolbars and scrollbars, which is the number your layout really responds to on mobile phones, tablets and desktop monitors before any scrolling starts.
How the What Is My Viewport Size Checker Works
The page asks the browser for its own measurements through JavaScript, so nothing is uploaded or stored. Think of it as a screen size detector and a screen resolution checker in one panel: a free screen resolution tester that works the same way on all devices. Use the free color gamut checker online to confirm everything looks correct before you rely on it elsewhere.
What the Viewport Size Tester Shows
The viewport size tester shows these values, refreshed in real time on every window resize:
- Current viewport size: the CSS viewport size as width and height.
- Screen resolution reported by the operating system.
- Device pixel ratio (DPR), the multiplier between layout and hardware.
- Orientation: landscape or portrait.
Resize the browser window and watch the window size figures change. Rotate a phone and orientation flips.
Checking the Same Numbers in DevTools
You can confirm any reading in DevTools. In Chrome, Edge, Firefox or Safari, open the console and type window.innerWidth, window.innerHeight and window.devicePixelRatio. All major browsers return the same values the panel shows, which makes the page handy for quick testing where developer tools are locked.
Screen Resolution vs Viewport Dimensions
The screen resolution describes the whole display; the viewport dimensions describe only the part a page can draw in. The gap between them causes most layout surprises.
Screen Resolution, CSS Pixels and Physical Pixels
A panel's hardware resolution counts physical pixels. Your browser lays pages out in CSS pixels, and operating system scaling sits between them. A laptop with a 1920×1200 panel set to 125% scaling reports a screen of 1536×960, the same way a Full HD or 4K monitor reports a smaller number once scaling is on. The physical resolution of any area is:
$$\text{physical px} = \text{CSS px} \times \text{DPR}$$
So the 1536-wide layout fills \(1536 \times 1.25 = 1920\) device pixels.
Device Pixel Ratio on a Retina Display
The device pixel ratio is the multiplier the checker shows: how many device dots draw one page unit per axis. A retina display or other HiDPI screen reads 2, written as a 1:2 device pixel ratio, so images need double the pixel density to stay sharp. Android's dp or dip unit plays the same role, so a phone's reading comes in dp-sized units, not panel dots. The spec anchors this to the CSS reference pixel, so a TV's ideal viewport depends on its screen diagonal and viewing distance. On phones, the ideal width only applies when the page includes <meta name="viewport" content="width=device-width">.
How Zoom Level Shifts the Viewport Width
Take the laptop above with the browser maximised. The checker reads 1536×825: 960 screen pixels minus a 48-pixel taskbar and 87 pixels of tabs and toolbar. Now raise the browser zoom level. Every step divides the CSS width by the scale and multiplies the DPR by it:
| Browser scale | Viewport (CSS px) | DPR | Tailwind breakpoint |
|---|---|---|---|
| 100% | 1536×825 | 1.25 | 2xl |
| 110% | 1396×750 | 1.375 | xl |
| 125% | 1229×660 | 1.5625 | lg |
| 175% | 878×471 | 2.1875 | md |
One notch of magnification drops this screen out of the widest layout.
Debugging a Client's Collapsed Sidebar with a Screen Size Detector
A client emails a screenshot: on their Windows laptop, the dashboard sidebar has vanished behind a menu icon. On my 1920-wide monitor it looks fine, so the question is simple. Is this a bug, or is their viewport narrower than the 1400 px breakpoint where my CSS collapses the sidebar? The answer: their viewport width is 1367 px, so the collapse is working as written, and the breakpoint is what needs to move. The dark mode checker checks your input against current best practices and flags anything worth fixing.
I send them the checker link instead of asking what laptop they own, because the model name tells me nothing about the browser. They paste back three readings:
- Viewport: 1367×795
- Screen resolution: 1504×1003
- DPR: 1.65
The screen figure is the clue. Their 2256×1504 panel at 150% Windows scaling gives 1504 CSS px across, and 1.5 is the DPR I'd expect. A DPR of 1.65 means something else multiplied it: \(1.65 \div 1.5 = 1.1\), so the browser is at 110%. I cross-check it: \(1504 \div 1.1 = 1367.3\), which rounds to exactly what the checker showed.
| Browser scale | Viewport width | Sidebar at 1400 px rule | Sidebar at 1280 px rule |
|---|---|---|---|
| 100% | 1504 | shown | shown |
| 110% | 1367 | collapsed | shown |
| 125% | 1203 | collapsed | collapsed |
Solving for the threshold makes the decision for me: \(1504 \div 1400 = 1.074\), so any magnification above 107.4% collapses the sidebar, and browsers jump straight from 100% to 110%. On this screen, the old rule turns every zoomed-in visit into the mobile layout. I move the rule to Tailwind's xl line at 1280 px and ask the client to rerun the checker; the sidebar returns at 1367 px.
One caveat a quick search won't tell you: media queries measure the width including the scrollbar, while document.documentElement.clientWidth leaves it out, so a script measuring the same page reads about 15 px less. When I need JavaScript and CSS to agree near a breakpoint, I leave a gap of at least that much between them. The input I watch first is never the hardware. It's the zoom, because it's the one setting users change without thinking of it as a change.
Testing Responsive Design Across Viewport Widths
Responsive design is judged in CSS pixels, not hardware dots. That's why web developers, designers and QA testers keep a screen resolution tester open while they build a website: it shows which UI rules are active and whether the UX holds. Good web design keeps the user experience and user interface intact at every width: when the checker's reading crosses a breakpoint, the layout should change at that exact pixel.
Media Queries and the Tailwind CSS Breakpoint
Media queries fire on viewport width, so the panel tells you which responsive breakpoints apply right now. Tailwind's breakpoints sit at 640, 768, 1024, 1280 and 1536 pixels, and the screen resolution tester names the active Tailwind CSS breakpoint. Build mobile-first, then check layout behavior at each step:
- navigation wrapping on mobile and tablet widths
- image crops and sticky elements at desktop widths
- text overflow inside fluid layouts
Device Emulation in a Headless Browser
Device emulation lets you set a custom viewport size without owning the hardware. DevTools presets cover iPhone, iPad and Android models, and a headless browser run by an automation script can open a page at fixed dimensions and take screenshots. A screen resolution tester on the real device remains the final check, because emulation can't reproduce real toolbars.
Most Common Screen Sizes and Screen Width Classes
Browser statistics show the most common screen sizes cluster in a few bands, so a screen size comparison by width is more useful than a list of models. Sorting viewport sizes into screen width classes from small phones to large desktops lets you plan for popularity instead of every display size. Lists of viewport pixel sizes go stale fast, so measure your own screen size with the checker and note the screen width you design for.
Screen Heights and the Browser Chrome
Screen heights vary more than widths because the browser chrome takes a share. On phones, the address bar slides away as you scroll, so the viewport grows taller mid-session; on a desktop, tabs and bookmark bars take a fixed slice. That is why the checker's height reading sits lower than your screen height.
Frequently Asked Questions
- What is the difference between screen resolution and viewport size?
- Screen resolution is the size of your whole display as the operating system reports it. Viewport size is only the area inside the browser window that a page can draw in, so it is smaller once tabs, the address bar, toolbars and the taskbar take their share.
- What does device pixel ratio mean?
- Device pixel ratio (DPR) is how many hardware pixels draw one CSS pixel along each axis. A DPR of 2 on a Retina or HiDPI screen means four device pixels per CSS pixel, so images need twice the CSS size in pixels to stay sharp.
- Why does my viewport height change when I scroll on a phone?
- Mobile browsers hide the address bar as you scroll down and show it again as you scroll up, so the visible viewport height grows and shrinks. The width stays the same, which is why layouts are planned around width.
- Which Tailwind CSS breakpoint am I on?
- Tailwind's default breakpoints start at 640 px (sm), 768 px (md), 1024 px (lg), 1280 px (xl) and 1536 px (2xl). The checker compares your viewport width, not your screen width, with those values because media queries use the viewport.
- Why does browser zoom change my viewport size?
- Zooming in makes each CSS pixel bigger, so fewer of them fit across the same window: at 110% the viewport width drops by about 9% and the device pixel ratio rises by 10%. That can move a page into a narrower breakpoint without any change to your screen.
- How do I test my site at a specific screen size?
- Resize the browser window until the viewport width matches the size you want, or use your browser's DevTools device emulation to set an exact width and height. Recheck the result on a real device, since emulation does not reproduce real toolbars.
- What is the ideal viewport?
- The ideal viewport is the width a screen should report so that one CSS pixel looks about the same size to your eye as the CSS reference pixel at a normal reading distance. It depends on the screen's diagonal, its resolution and how far away you sit, which is why large TVs viewed from across the room need a much smaller ideal viewport than their hardware resolution.