Viewport Size Calculator

Web layout is measured in CSS pixels, which are a unit of visual angle rather than of hardware. CSS 2.1 anchors the reference pixel to roughly 1/96 inch viewed at arm's length, about 0.0213 degrees of arc, so a CSS pixel keeps approximately the same apparent size on a phone held close and a monitor at desk distance. The device pixel ratio is the number of physical pixels the browser uses per CSS pixel in each dimension. A handset with an 1179 by 2556 panel and a DPR of 3 presents a 393 by 852 CSS viewport, and its layout, media queries, and viewport units all work in those 393 units, not the 1179. Viewport units follow from the same numbers: 1vw is one percent of viewport width, 1vh one percent of viewport height, with vmin and vmax taking the smaller and larger of the two. Several subtleties limit naive arithmetic. On mobile, the layout viewport used for CSS and the visual viewport actually on screen diverge when the user pinch-zooms or the software keyboard appears, and the classic vh unit was defined against the largest viewport state, so an element sized at 100vh is clipped while the URL bar is visible. The dynamic units dvh, svh, and lvh were added to address exactly this and shipped in Chrome and Safari during 2022. Physical pixel counts also are not the whole story for image work: what matters is CSS display width multiplied by DPR, so an image shown at 400 CSS px on a 3x screen needs a 1200 px source. Notch and home-indicator insets, exposed through the env safe-area-inset values, reduce usable area further on modern handsets.

The problem this calculator addresses was created largely by two Apple decisions. When the original iPhone shipped in 2007, its Safari browser rendered desktop pages into a virtual layout viewport around 980 px wide and scaled the result down to the 320 px screen, and Apple introduced the viewport meta tag so authors could opt out by declaring width=device-width. The tag was not a W3C specification at the time; it was documented in Apple's developer material and copied by every other mobile browser because sites already depended on it. Then in June 2010 the iPhone 4 introduced the display Apple marketed as Retina, doubling physical resolution while holding the CSS viewport at 320 by 480, which made device pixel ratio a routine concern for anyone preparing image assets. Standards followed practice. CSS3 media queries became a W3C Recommendation in June 2012, giving authors a formal way to branch on viewport width, and the viewport-relative length units vw, vh, vmin, and vmax were defined in the CSS Values and Units Module Level 3, appearing in Internet Explorer 9 in 2011 and across other engines over the following two years. Ethan Marcotte's 2010 article on responsive web design supplied the design vocabulary those features served. Later work filled the remaining gaps: the visualViewport API standardized access to the pinch-zoom and keyboard-adjusted viewport, dynamic viewport units arrived in 2022, and container queries, available in all major browsers from 2023, let a component respond to its own container rather than to the viewport.