What is my viewport size?
The viewport is the part of the screen your page gets, and it is what responsive layouts actually respond to. It is always smaller than your screen, sometimes much smaller. On a phone it changes as you scroll, because the address bar collapses, which is the usual reason a measurement taken twice gives two answers.
What this number actually means
The pair above is window.innerWidth by window.innerHeight: the visible content area in CSS pixels, including the space taken by a classic scrollbar. It is smaller than your screen resolution because it excludes the address bar, tabs, bookmarks bar and any window edge you have not dragged to the corner. This is the number a CSS media query compares against, so it, not your monitor, decides which layout you get.
Your viewport size is shown above and updates the instant you resize the window. The viewport is the visible content area inside your browser, the space left for the page itself after browser chrome, toolbars and scrollbars. It is what responsive CSS actually responds to.
This is almost always the number you want when a design breaks. A layout switches from a multi-column desktop view to a stacked mobile view based on the viewport width, not your monitor's resolution. A large monitor with a narrow browser window behaves like a small screen as far as the page is concerned.
Try dragging the window edge and watch the value change above. That live relationship is exactly what media queries key off, which is why testing at your real viewport beats guessing from your screen specs.
How a website reads this
This is the exact call a page makes. Nothing else is involved, and nothing is sent anywhere: the value is read in your browser and displayed to you.
window.innerWidth and window.innerHeightThe area your page is actually drawn into, scrollbars included. Changes when you resize the window, open devtools, rotate a phone, or when a mobile browser's address bar slides away, which is why the height on a phone is a moving target.
- Needs your permission
- No, it is read silently
- Can it be faked
- Partly. You change it by resizing the window. Tor Browser deliberately snaps it to fixed steps so that many users report the same figures.
- Contribution to a fingerprint
- About 4 bits, our own estimate. Our estimate. Because a viewport can be nearly any size, it carries more than the screen size does, but it also changes between visits, which limits its use for recognising a returning visitor. How we estimate this.
Which layout does my viewport width trigger?
Most responsive designs break at roughly these widths. Find the row your reported width falls into to see what a typical site is doing with it.
| Viewport width | Device it usually means | What most layouts do |
|---|---|---|
| Under 480 px | Phone in portrait | Single column, hamburger menu, full width images, stacked forms. |
| 480 to 767 px | Large phone or a narrow window | Still single column, but with more generous spacing and sometimes two column cards. |
| 768 to 1023 px | Tablet in portrait, or a half screen desktop window | Two columns appear, the navigation often expands out of the hamburger. |
| 1024 to 1279 px | Tablet in landscape, small laptop | Full desktop navigation, three column grids, sidebars return. |
| 1280 to 1535 px | Standard laptop or a windowed desktop browser | The layout most sites are actually designed and tested at. |
| 1536 px and up | Maximised on a large monitor | Content is usually capped at a maximum width and centred rather than stretched. |
Drag your window edge and watch the reading at the top of this page change. Crossing one of these thresholds is exactly what makes a page suddenly rearrange itself.
Why does my viewport height keep changing on mobile?
Because mobile browsers hide and reveal their toolbars as you scroll, and the viewport grows and shrinks with them. A value read the moment the page loads is the small viewport; after you scroll down and the address bar collapses, the same page has more height to work with.
This is the reason a full height element sized with 100vh used to overflow on phones: the unit resolved against the large viewport while the toolbar was still on screen. CSS now has svh for the small viewport, lvh for the large one and dvh for whichever applies right now, which is the correct fix rather than a JavaScript workaround.
If you are debugging a layout that jumps on a phone but not on a desktop, this is the first thing to check.
Should I design against the viewport or the screen resolution?
The viewport, in nearly every case. Media queries, container queries, srcset sizes and the point at which your navigation collapses all key off the viewport, so a 1920 pixel monitor with a half width browser window behaves exactly like a 960 pixel laptop as far as your CSS is concerned.
Screen resolution matters for two narrower jobs: deciding whether a design can physically fit at all, and reasoning about image resolution together with the device pixel ratio. It is context, not the trigger.
The practical habit is to stop maximising your browser while testing. Resizing the window across the thresholds in the table above finds broken layouts faster than any device emulator, because it is real rendering rather than a simulation.
What can a website learn about me from my viewport size?
Less than from your screen resolution, and for a good reason: the viewport is whatever you happened to drag the window to, so it varies between visits and even within one session. A signal that changes is a poor identifier.
It is still recorded. Analytics tools log it to learn which window sizes their visitors really use, and fingerprinting scripts include it because at a single moment in time it adds a few bits, particularly if your window is an unusual size.
Where it becomes more revealing is in combination with the screen resolution: the difference between the two exposes how much browser interface you have on screen, which hints at your browser, your operating system and whether you keep a bookmarks bar open. None of that identifies you alone, but it is more than most people expect a page to notice.
What you should know
Why sites collect it
Responsive sites read the viewport constantly to choose layouts, load correctly sized images, and decide how many columns or menu items fit. Analytics use it to understand the window sizes visitors actually use.
Privacy implications
Viewport size changes as you resize, so it is less stable than screen resolution and therefore a weaker standalone fingerprint. It still contributes when captured at a moment in time, and an unusual window size adds a little entropy.
How to change or hide it
You control the viewport simply by resizing or maximising your browser window. Because it is variable and user-driven, it is one of the less concerning display signals from a tracking standpoint.
Frequently asked questions
Why is my viewport smaller than my screen resolution?
The viewport excludes browser toolbars, the address bar, scrollbars, and any window space you have not filled. It is only the visible page area.
What is my browser window size?
The viewport figure above is the visible page area. The full window including toolbars is slightly larger; the difference is browser interface, which pages cannot draw into.
Which size should I test my design against?
Usually the viewport, because responsive breakpoints react to it. Resize your window to your target widths and watch the number above.
Why does 100vh overflow on my phone?
Mobile toolbars change the viewport height as you scroll, and 100vh resolves against the large viewport. Use dvh for the current height, or svh for the smaller toolbar-visible height.
Sources
Browser behaviour changes and vendors cap these values differently, so the claims above that are not self-evident are checked against the specifications and vendor documentation below.
Last checked on . How these values are measured and estimated is set out on the methodology page.
Something wrong here? Tell us what your browser reports and it gets corrected.