What is my Viewport Size?

What Is Viewport Size?

Your viewport size is the visible area of a web page inside your browser window — the region where HTML layout and CSS styles are actually rendered. When you open a website, the browser calculates the width and height of that visible canvas and uses those dimensions to apply your CSS rules, trigger media queries, and position every element on the page.

Viewport size is measured in CSS pixels, not physical screen pixels. This distinction matters enormously: the CSS pixel is a logical unit that stays consistent regardless of how many physical dots your display hardware packs per inch. A CSS pixel on a standard desktop monitor equals one physical pixel, but on a modern high-density smartphone, a single CSS pixel can correspond to 9 or more physical pixels. This is what allows sharp, high-resolution displays to render web content at normal, readable sizes.

Viewport Size vs. Screen Resolution — Understanding the Difference

Screen resolution is the raw pixel count of your display panel — a hardware value set by the manufacturer. A phone might have a native resolution of 1080 × 2400 physical pixels. Viewport size is what the browser actually works with after the operating system applies its scaling factor, called the device pixel ratio (DPR).

The formula is: Viewport Width = Screen Resolution ÷ Device Pixel Ratio. A phone with a 1080px-wide screen and a DPR of 2.625 has a viewport width of approximately 412 CSS pixels. Your CSS media queries see 412px — not 1080px. This is why two phones with very different screen resolutions can share the same viewport width and look identical in a browser layout.

Confusing viewport size with screen resolution is one of the most common mistakes in responsive web design. If you write CSS breakpoints based on hardware resolution rather than viewport pixels, your layouts will break across real devices. The values shown by the tool above are the ones that actually matter for CSS.

What Is Device Pixel Ratio (DPR) and Why Does It Affect Your Viewport?

The device pixel ratio is the multiplier your operating system uses to map physical screen pixels to CSS pixels. On a typical desktop monitor, DPR is 1.0 — one CSS pixel equals one physical pixel. On modern smartphones and high-resolution laptops, DPR values of 2.0, 3.0, or 3.5 are standard.

A higher DPR means the device renders each CSS pixel using a grid of physical pixels — a 3× DPR uses a 3×3 grid of 9 physical pixels per CSS pixel. The result is sharper text and crisper images without changing the logical layout dimensions. Apple's Retina displays, Samsung's AMOLED panels, and Google's high-density screens all use elevated DPR to deliver visual quality while keeping web content at comfortable reading sizes.

Your browser exposes the current DPR through the JavaScript property window.devicePixelRatio. The tool above reads this value alongside your viewport dimensions so you can see both the CSS pixel canvas and the underlying pixel density.

How to Read Your Viewport Size in JavaScript

JavaScript exposes several properties for reading viewport and screen dimensions. Knowing which one to use — and which to avoid — prevents common layout bugs:

• window.innerWidth / window.innerHeight — the current viewport size in CSS pixels, including the scrollbar width. This is the most reliable value for responsive layout decisions and matches what CSS media queries test against.
• document.documentElement.clientWidth / clientHeight — viewport size excluding the scrollbar. Useful for precise layout calculations where scrollbar overlap matters.
• window.devicePixelRatio — the current DPR. Use this to serve high-resolution images dynamically or to draw sharp graphics on <canvas> elements.
• screen.width / screen.height — the physical screen resolution. Do not use these for layout decisions — they reflect hardware pixels, not CSS pixels, and will give incorrect results on high-density screens.

The tool at the top of this page reads window.innerWidth, window.innerHeight, and window.devicePixelRatio in real time and refreshes when you resize your browser window, giving you an accurate live snapshot of your current viewport.

Common Viewport Sizes in 2025 — Mobile, Tablet, and Desktop

While every device has its own exact dimensions, web traffic clusters around a predictable set of viewport widths. Understanding these common breakpoints helps you design layouts that work well across the full range of real devices.

• 360px — the most widely used Android viewport width, found on Samsung Galaxy S-series, Galaxy A-series, and many mid-range Android phones.
• 390px — iPhone 15, iPhone 14, and iPhone 13 in portrait mode.
• 412px — Google Pixel phones, Samsung Galaxy A54/A55, and many OnePlus devices.
• 428px — iPhone 13 Pro Max, iPhone 14 Plus.
• 768px — classic iPad portrait viewport, still the most common tablet breakpoint in CSS frameworks.
• 820px — iPad Air 11" M2 in portrait.
• 834px — iPad Pro 11" M4 in portrait.
• 1024px — iPad Pro 13" in portrait; also a common desktop minimum breakpoint.
• 1280px — MacBook Air 13" M4 default viewport; many smaller laptop screens.
• 1440px — MacBook Air 15" M4, and most 1440p desktop monitors at DPR 1.0.
• 1512px — MacBook Pro 14" M4 default viewport.
• 1920px — Full HD desktop monitors at DPR 1.0 (viewport equals screen resolution).

Browse the full Viewport Sizes by Device table to find the exact CSS dimensions for any phone, tablet, or laptop you need to target.

Writing CSS Media Queries Based on Viewport Size

Once you know your target device's viewport width, writing accurate CSS media queries is straightforward. Media queries always test against viewport CSS pixels — never hardware resolution. Here are practical examples covering the most common scenarios:

/* Mobile phones — up to 480px */
@media only screen and (max-width: 480px) { /* styles */ }

/* Tablets in portrait — 768px to 1024px */
@media only screen and (min-width: 768px) and (max-width: 1024px) { /* styles */ }

/* Landscape orientation on phones */
@media only screen and (orientation: landscape) and (max-width: 900px) { /* styles */ }

/* Retina and high-density displays (DPR ≥ 2) */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx) { /* high-res image styles */ }

For retina-quality images, use srcset on your <img> tags or image-set() in CSS to serve 2× and 3× assets only to devices that can display them. Serving large images to standard-density screens wastes bandwidth; serving standard images to high-density screens looks blurry on sharp Retina displays.

Portrait vs. Landscape Viewport — How Rotation Changes Your Dimensions

On mobile devices, rotating the screen swaps the viewport width and height. A phone with a 360 × 780 portrait viewport becomes roughly 780 × 360 in landscape. The browser fires a resize event, re-evaluates all media queries, and re-renders the layout to fit the new orientation.

Many layouts that work well in portrait break in landscape because the reduced height causes content to overflow or collapse. Always test both orientations — especially for navigation menus, hero images, fixed headers, and modal overlays. You can detect orientation changes in CSS with the orientation media feature, or in JavaScript by listening to the resize event or screen.orientation.onchange.

Use the Refresh button in the tool above to re-read your viewport after rotating your device and see the exact dimensions in each orientation.

Why Checking Your Own Viewport Size Matters

Knowing your current viewport size is useful in several real-world situations. If a website layout looks broken on your device, checking your viewport width helps you understand which CSS breakpoint is active and why the layout is rendering the way it is. If you are a developer and a client reports a display issue on their device, knowing their viewport dimensions is often the first step in reproducing and fixing the problem.

Designers use viewport size to verify that UI mockups map correctly to real device constraints. A design built at 375px wide looks different on a 360px-wide phone — even though both are considered "mobile." QA testers use live viewport readings to confirm that breakpoints activate at the intended widths during cross-browser testing.

The tool on this page gives you an instant, accurate reading of your browser's current CSS canvas — no extensions, no DevTools required. Share the URL with a client or colleague and ask them to open it on their device to instantly compare viewport dimensions across different hardware.

Disclaimer: Viewport and screen resolution data vary by device, OS version, and browser. Values shown are based on the browser's reported properties at the time of measurement. If you find any inaccuracies, email us at [email protected]