Viewport Size Calculator
Our web & development tool computes viewport size accurately. Enter your inputs for detailed analysis and optimization tips.
Formula
CSS Width = Screen Width / DPR | Viewport Height = CSS Height - Browser Chrome | 1vw = CSS Width / 100 | 1vh = Viewport Height / 100
Screen resolution is divided by the device pixel ratio to get CSS pixel dimensions. Browser chrome (address bar, tabs) is subtracted from the height to get the actual viewport height. Viewport units are calculated as 1% of the respective viewport dimension.
Worked Examples
Example 1: Standard Desktop Monitor
Problem: A developer has a 1920x1080 monitor with DPR 1 and wants to know the CSS viewport dimensions and viewport unit values.
Solution: CSS Width = 1920 / 1 = 1920px\nCSS Height = 1080 / 1 = 1080px\nViewport Height = 1080 - 80 (browser chrome) = 1000px\n1vw = 1920 / 100 = 19.20px\n1vh = 1000 / 100 = 10.00px\n1vmin = min(19.20, 10.00) = 10.00px\n1vmax = max(19.20, 10.00) = 19.20px\nBreakpoint: xl (desktop)
Result: CSS Viewport: 1920 x 1000px | 1vw = 19.20px | 1vh = 10.00px | Breakpoint: xl
Example 2: Retina Mobile Device
Problem: An iPhone 14 Pro has a screen resolution of 1179x2556 with DPR 3. Calculate the CSS viewport and responsive breakpoint.
Solution: CSS Width = 1179 / 3 = 393px\nCSS Height = 2556 / 3 = 852px\nViewport Height = 852 - 80 = 772px\n1vw = 393 / 100 = 3.93px\n1vh = 772 / 100 = 7.72px\nBreakpoint: xs (mobile) since 393 < 640\nOrientation: Portrait
Result: CSS Viewport: 393 x 772px | 1vw = 3.93px | 1vh = 7.72px | Breakpoint: xs (mobile)
Frequently Asked Questions
What is a viewport in web development?
A viewport is the visible area of a web page that the user can see without scrolling. It differs from the total page size because web pages can extend beyond the visible screen area. On desktop browsers, the viewport is the browser window minus the address bar, tabs, and other browser chrome. On mobile devices, the viewport is the entire screen area available to web content. Understanding viewport dimensions is critical for responsive design because CSS media queries, viewport units, and layout calculations all depend on the viewport size rather than the physical screen resolution.
What is the difference between screen resolution and CSS viewport size?
Screen resolution refers to the actual physical pixels on a display, while CSS viewport size is measured in CSS pixels (also called device-independent pixels). Modern devices often have a device pixel ratio (DPR) greater than 1, meaning multiple physical pixels represent a single CSS pixel. For example, an iPhone 14 Pro has a physical resolution of 1179 x 2556 pixels but a CSS viewport of 393 x 852 pixels because its DPR is 3. This distinction matters because CSS layout, media queries, and viewport units all operate on CSS pixels, not physical pixels. Designers must account for DPR when preparing images to ensure they appear sharp on high-density displays.
What are viewport units (vw, vh, vmin, vmax) and how are they used?
Viewport units are CSS length units relative to the viewport dimensions. One vw equals 1% of the viewport width, and one vh equals 1% of the viewport height. The vmin unit equals 1% of whichever viewport dimension is smaller, while vmax equals 1% of the larger dimension. These units are extremely useful for creating fluid typography, full-screen sections, and responsive layouts without media queries. For example, setting font-size to 4vw makes text scale proportionally with the browser width. A common pattern is using min() or clamp() with viewport units to set boundaries, like clamp(16px, 2.5vw, 24px) for responsive but constrained text sizing.
What is the difference between visual viewport and layout viewport on mobile?
Mobile browsers have two viewport concepts. The layout viewport is the full-width area used for CSS layout calculations and is controlled by the viewport meta tag. Without the meta tag, mobile browsers use a default layout viewport around 980px wide and shrink the page to fit the screen. The visual viewport is the portion of the page currently visible on screen, which changes when users pinch-to-zoom. When zoomed in, the visual viewport is smaller than the layout viewport. The meta tag viewport with width=device-width and initial-scale=1.0 synchronizes the layout viewport to the device width, which is essential for mobile-responsive design.
How do I handle viewport changes for responsive layouts?
Viewport dimensions change when users resize their browser window, rotate their device, or when the virtual keyboard appears on mobile. In CSS, media queries automatically respond to viewport changes. In JavaScript, you can listen for the resize event on the window object or use the more modern ResizeObserver API. The visualViewport API provides precise information about the visual viewport, including offset and scale. For mobile keyboards, the visualViewport resize event is more reliable than the window resize event. Modern CSS features like container queries allow components to respond to their container size rather than the viewport, which is often more practical for component-based architectures.
What is the viewport meta tag and why is it important?
The viewport meta tag is an HTML meta element that controls how the browser renders the page on mobile devices. The most common setting is width=device-width, initial-scale=1.0, which tells the browser to set the layout viewport width equal to the device CSS width and start at 100% zoom. Without this tag, mobile browsers default to a virtual viewport of about 980px and scale the entire page down to fit, making text tiny and requiring users to zoom in. Additional properties include maximum-scale, minimum-scale, and user-scalable, though restricting zoom via user-scalable=no is strongly discouraged for accessibility reasons because it prevents visually impaired users from zooming in.