Viewport size is the width and height of the area a browser uses to display a web page, measured in CSS pixels. It is usually much smaller than a device’s screen resolution: an iPhone with a 1206 × 2622 pixel screen has a viewport of 402 × 874 CSS pixels, because each CSS pixel is drawn with three physical pixels in each direction. Responsive CSS, media queries and most layout decisions use the viewport size, not the screen resolution.
Viewport size vs screen resolution
Three numbers describe a phone’s display, and they are easy to mix up:
| Term | Example (iPhone 17) | What it is |
|---|---|---|
| Screen resolution | 1206 × 2622 px | Physical pixels on the panel |
| Device pixel ratio (DPR) | 3 | Physical pixels per CSS pixel, in each direction |
| Viewport size | 402 × 874 CSS px | Resolution divided by DPR; what CSS sees |
On desktop, the DPR is often 1 (a 1920 × 1080 monitor at 100% scaling gives a 1920 px wide viewport, minus scrollbars), or 2 on high-density laptop screens. The browser’s zoom level changes the DPR as well: zooming to 200% halves the viewport width in CSS pixels.
For phone-by-phone numbers, see the iPhone viewport chart.
How to check your viewport size
In the browser console
Open DevTools (F12 or Cmd + Option + I), go to the Console and run:
`${window.innerWidth} × ${window.innerHeight} @ ${window.devicePixelRatio}x`window.innerWidth includes the vertical scrollbar. document.documentElement.clientWidth excludes it, and is closer to what CSS percentages and 100% widths use.
In DevTools device mode
The device toolbar shows the emulated viewport size at the top of the page. In Responsive mode you can drag or type any size. See the Chrome mobile emulator guide.
On a phone
Open any “what is my viewport” web page, or load a page with a small script that prints innerWidth and devicePixelRatio. Remember that the result depends on orientation and on the browser’s toolbars.
Layout viewport and visual viewport
Mobile browsers actually have two viewports:
- The layout viewport is the area CSS lays the page out in. With a correct viewport meta tag, its width equals the device width in CSS pixels.
- The visual viewport is the part currently visible on screen. It shrinks when the user pinch-zooms or when the on-screen keyboard opens.
position: fixed elements are positioned against the layout viewport, which is why a fixed footer can end up hidden behind the keyboard. JavaScript can read the visual viewport through window.visualViewport.width and .height, and listen for its resize event.
Why the viewport height keeps changing on mobile
On phones, the address bar and toolbars collapse as you scroll, so the visible height changes. Classic 100vh uses the largest possible height, which is why full-height sections used to be cut off at the bottom. CSS now has units for each case:
| Unit | Means |
|---|---|
svh |
Small viewport height: toolbars fully shown |
lvh |
Large viewport height: toolbars fully hidden |
dvh |
Dynamic viewport height: changes as toolbars move |
vh |
Same as lvh in modern mobile browsers |
For a hero section that should fit the screen when the page loads, min-height: 100svh is usually the safest choice. Matching svw, lvw and dvw units exist for width.
Common viewport sizes
| Device type | Typical viewport widths (portrait) |
|---|---|
| Small phones | 320–375 px |
| Current iPhones | 375–440 px |
| Android phones | 360–412 px |
| Tablets | 744–1032 px |
| Laptops | 1280–1536 px |
| Desktop monitors | 1440–2560 px |
These ranges are why responsive layouts are built to be fluid between breakpoints instead of targeting exact sizes.
Testing different viewport sizes
Resizing a desktop window changes the viewport width, but desktop browsers typically stop around 500 px and keep a DPR of 1 or 2. To see a phone viewport with the right size and pixel ratio, use DevTools device mode, or a mobile view extension such as Mobile View Extension, which applies a device’s screen size, pixel ratio and user agent and lets you enter custom resolutions. The full process is in how to test responsive design.
Frequently asked questions
What is my viewport size?
Run window.innerWidth and window.innerHeight in your browser’s console. On phones, open a page that displays these values; the result changes with orientation.
Is viewport size the same as screen resolution?
No. Viewport size is in CSS pixels; screen resolution is in physical pixels. Divide the resolution by the device pixel ratio to get the viewport size.
What viewport size should I design for?
Design fluid layouts that work from 320 px up. Check common phone widths of 360, 390–402 and 430–440 px, a tablet around 768–834 px and desktop around 1280–1440 px.