Table of Contents
Your viewport is the part of the browser window that shows the web page, measured in CSS pixels, and it’s almost never the same number as your screen resolution. So if you’re asking “what is my viewport,” the quickest answer is to open a viewport checker in the browser you care about, or type window.innerWidth into the console, and you’ll see the width and height that websites design around. A 1920 × 1080 laptop running Windows at 125% scaling, for example, usually reports a viewport around 1536 pixels wide, not 1920. Below we’ll cover every way to check it on desktop and mobile, why the numbers differ from your screen size, and the common viewport sizes worth knowing.
What is a viewport, and what does it mean?
A viewport is the visible area of a web page inside your browser. It excludes the browser “chrome,” meaning the tabs, address bar, bookmarks bar and window borders. Mozilla’s documentation puts it plainly: the browser chrome is not considered part of the viewport.
That’s why the viewport meaning matters to anyone who builds or tests websites. Your monitor might be 27 inches and 2560 pixels wide, but if your browser window is snapped to half the screen, the page only gets about half of that space. CSS media queries, responsive layouts and vw/vh units all respond to the viewport, not to the physical display.
Layout viewport vs visual viewport
Browsers keep track of two viewports, and the difference trips people up on phones.
- Layout viewport: the area the page is laid out in. This is what
window.innerWidthandwindow.innerHeightreport. - Visual viewport: the part of the layout viewport you can see right now. It’s the same size as the layout viewport or smaller.
When you pinch-zoom, open the on-screen keyboard, or the address bar slides back into view, the visual viewport shrinks while the layout viewport stays put. That’s why a fixed header can seem to vanish when you zoom in on a phone. If you need the visual viewport specifically, browsers expose it through window.visualViewport.width and window.visualViewport.height.
What is my viewport size, and how do I check it?
There are four reliable ways to find your viewport size. Pick the one that fits the device you’re on.
Method 1: Use an online viewport checker
The fastest option needs no technical knowledge. Open a viewport checker such as whatismyviewport.com or viewportsizer.com, and the page reads your browser’s dimensions and shows them live. Resize the window and the numbers update as you drag.
One tip that saves confusion: open the checker in the exact browser and window size you’re testing. If you check in Chrome full screen and then compare against a bug that happened in a half-width Safari window, the numbers won’t line up.
Method 2: Type one line into the browser console
On a desktop browser, press F12 (or Cmd + Option + I on a Mac) to open developer tools, click the Console tab, and paste this:
window.innerWidth + " x " + window.innerHeightPress Enter and you’ll get something like 1536 x 730. That’s your layout viewport in CSS pixels.
There’s a small catch. According to MDN, innerWidth includes the width of the vertical scrollbar if one is showing. If you want the usable width without the scrollbar, run document.documentElement.clientWidth instead. On Windows, where scrollbars take up real space, the two numbers often differ by about 15 to 17 pixels.
Method 3: Use responsive mode in DevTools
Every major desktop browser has a responsive design mode that shows the viewport size and lets you fake other screen sizes.
- Chrome and Edge: open DevTools and press Ctrl + Shift + M (Cmd + Shift + M on Mac) to toggle the device toolbar. The width and height appear at the top, and you can pick presets like iPhone or iPad.
- Firefox: press Ctrl + Shift + M (Cmd + Option + M on Mac) for Responsive Design Mode.
- Safari: turn on the Develop menu in Settings > Advanced, then choose Develop > Enter Responsive Design Mode.
Chrome has a handy extra: with DevTools open, drag the edge of the browser window and a small width × height label appears in the top-right corner of the page.
Method 4: Check your viewport on a phone or tablet
Phones don’t give you an easy console, so an online viewport checker is the simplest route. Open it in the mobile browser you use every day, since Safari, Chrome and Samsung Internet can report slightly different heights because their toolbars differ.
Rotate the phone and check again. Portrait and landscape give you different numbers, and the height can change as the address bar hides while you scroll.
Why is my viewport size different from my screen resolution?
This is the question behind most “what is my screen size” searches. Three things cause the gap.
CSS pixels vs device pixels
Websites measure in CSS pixels, not the physical dots on your panel. High-density screens pack several device pixels into each CSS pixel, and the ratio between them is called the device pixel ratio (DPR). You can see yours by typing window.devicePixelRatio in the console.
A phone with a physical width of 1179 pixels and a DPR of 3 gives you a viewport roughly 393 CSS pixels wide (1179 ÷ 3). That’s the number your layout responds to. It’s also why a phone with a “2K” screen still gets the mobile version of a site, and why text stays readable instead of shrinking to a speck.
Display scaling and browser zoom
Operating system scaling changes the math on laptops and desktops too. Windows often defaults to 125% or 150% on laptops, so a 1920-pixel-wide screen at 125% behaves like a 1536-pixel-wide one in the browser, with a DPR of 1.25.
Browser zoom works the same way. Press Ctrl and + a couple of times and your viewport width drops, because each CSS pixel now covers more of the screen. MDN’s own example shows a 1200 × 800 viewport becoming 800 × 533 after zooming in. If a site suddenly shows its tablet layout on your desktop, check your zoom level before blaming the site.
Scrollbars, toolbars and window size
The viewport only counts the page area. Tabs, the address bar, bookmarks, extension toolbars and the taskbar all eat into the height. A 1080-pixel-tall monitor rarely gives you more than about 900 to 950 pixels of viewport height in a normal browser window, and a docked DevTools panel takes even more.
If you also want to know your full screen size, screen.width and screen.height report the display in CSS pixels. Multiply by devicePixelRatio to estimate the physical resolution. Resolution is its own topic, and our 4K vs 1080p comparison explains what those pixel counts mean for the screen in front of you.
What are common viewport sizes for phones, tablets and laptops?
Viewport sizes vary by model, browser and settings, so treat these as typical portrait values in CSS pixels rather than fixed specs. They’re useful for a quick sanity check when you’re testing a layout.
| Device type | Typical viewport width (CSS px) | Notes |
|---|---|---|
| Small Android phones | 360 | Still one of the most common phone widths |
| Recent standard iPhones | 390 to 402 | DPR of 3 |
| Large “Max” or “Plus” phones | 412 to 440 | Width varies by brand |
| Tablets (portrait) | 768 to 834 | iPads and Android tablets |
| Tablets (landscape) | 1024 to 1194 | Can trigger desktop layouts |
| Laptops with 125% scaling | 1536 | 1920 × 1080 panel scaled up |
| Full HD desktops at 100% | 1920 | Minus scrollbar if visible |
Two things stand out once you start testing. First, the jump from phone to tablet is big, so layouts that look fine at 390 and 820 can still break somewhere around 600. Second, laptops at 1366 and 1536 pixels wide are far more common than many designers assume, so don’t only test at 1920. If you’re shopping for a tablet, our Samsung Galaxy Tab S9 review covers how its display handles split-screen apps, which is where viewport width really shows.
Why does knowing your viewport size matter?
For most people, the viewport only comes up when something looks wrong. Here’s when it’s worth checking.
- Reporting a website bug. “The menu overlaps the logo” is hard to fix. “The menu overlaps the logo at 1280 × 650 in Chrome” gets fixed fast. Include your viewport size in every layout bug report.
- Building responsive layouts. Media queries like
@media (max-width: 768px)respond to viewport width, so you need to know which side of the breakpoint your test device lands on. - Checking why a site shows the “wrong” version. If a desktop site shows its mobile menu, you’re probably zoomed in or running a narrow window.
- Testing ads, banners and video embeds. Fixed-size elements that are wider than the viewport cause sideways scrolling on phones.
For everyday browsing you can ignore it. For anyone who designs, writes for or troubleshoots the web, it’s the first number to check.
What is the viewport meta tag and why does it matter?
The viewport meta tag tells mobile browsers how wide the layout viewport should be. Without it, many mobile browsers assume a desktop-sized page and lay it out at a virtual width of around 980 pixels, then shrink it to fit the screen. Text ends up tiny and users have to pinch-zoom to read anything.
The standard fix goes in the page’s <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">width=device-width sets the layout viewport to the device’s width in CSS pixels, so a phone that’s 393 CSS pixels wide gets a 393-pixel layout. If your viewport checker shows a strange width like 980 on a phone, the page you’re testing is probably missing this tag.
How do vw, vh and dvh relate to your viewport?
CSS viewport units size elements as a percentage of the viewport. One vw is 1% of the viewport width and one vh is 1% of the viewport height. On an 800-pixel-wide viewport, 50vw equals 400 pixels.
Mobile browsers complicate the height, because the address bar grows and shrinks as you scroll. Newer units handle this:
- svh (small viewport height): sized as if the browser toolbars are fully showing. Stable and the safest default for full-screen sections.
- lvh (large viewport height): sized as if the toolbars are hidden. Plain
vhcurrently behaves likelvhin modern browsers. - dvh (dynamic viewport height): updates as the toolbars move. Accurate, but MDN warns it can make content resize while the user scrolls.
If a “100vh” hero section on your site gets cut off at the bottom on iPhone, switching to 100svh is usually the fix.
Conclusion
Checking your viewport takes about ten seconds: open a viewport checker or run window.innerWidth in the console, and you’ll see the width and height in CSS pixels that websites respond to. If that number doesn’t match your screen resolution, it’s not a mistake. Device pixel ratio, OS scaling, browser zoom and toolbars all sit between the two. Note your viewport size whenever you report a layout bug or test a design, and check it on both phone and desktop.
