What is my viewport size?
Your browser's viewport is shown below in CSS pixels, together with your screen size, device pixel ratio and the media features your CSS can see. It updates live as you resize the window or rotate your phone.
Closest devices
- Matching your screen with 51 phones and tablets…
A media query for this window
@media (width: …px) { … }Viewport, screen and resolution: what's the difference?
The viewport is the box the page is laid out in. Media queries such as (max-width: 600px), vw units and percentage widths are all measured against it, in CSS pixels. The screen is the whole display, also in CSS pixels. The physical resolution is the screen in hardware pixels: CSS pixels multiplied by the device pixel ratio (DPR). An iPhone 16 Pro has a 402 × 874 CSS px viewport and a DPR of 3, so its screen is 1206 × 2622 physical pixels.
On a phone the viewport only matches the screen width if the page has a viewport meta tag with width=device-width. Without it, mobile browsers lay the page out about 980 px wide and shrink it, which is why text becomes tiny.
Why the height keeps changing on phones
Mobile browsers hide and show their address bar and toolbar as you scroll, and the on-screen keyboard can cover part of the page. The layout height changes with the bars; the visual viewport shrinks with the keyboard and with pinch-zoom. For full-height sections use 100svh (smallest visible height) or 100dvh (current height) instead of 100vh. Each device page shows how much of its screen the browser's bars take.
Test your site at real phone sizes
Knowing the numbers is half the job. MobileCheck opens your page on any of 51 phones and tablets — iPhones in Safari's engine — and shows every place where text is too small, buttons are too close or the layout breaks.
Frequently asked questions
What is my viewport size?
It is the area your browser lays a web page out in, measured in CSS pixels. The number at the top of this page is your current viewport; it changes when you resize the window, rotate your phone or open the on-screen keyboard.
Why is my viewport smaller than my screen resolution?
Screens with a device pixel ratio above 1 draw each CSS pixel with several physical pixels. A phone with a 1170-pixel-wide screen and a ratio of 3 has a viewport 390 CSS px wide. Browser bars, the scrollbar and the window size make the viewport smaller still.
What is the difference between the layout and the visual viewport?
The layout viewport is what CSS media queries and percentages are based on. The visual viewport is the part currently on screen: it shrinks when you pinch-zoom or when the on-screen keyboard opens on some phones.
Which viewport widths should I test?
For phones, 360, 375, 390–393, 412 and 430 CSS px cover most devices in use, plus 320 for small screens and accessibility zoom. Tablets start around 744–834 px in portrait. The table of mobile viewport sizes lists 51 devices.