Guide
CSS viewport explained for real projects
Understand how CSS viewports work, how DPR fits in and how to make layout decisions with confidence.
The viewport is your canvas. But unlike a painter’s canvas, this one changes size, shape, and density every time a new user visits your site.
Physical vs. CSS Pixels
This is the #1 point of confusion. A phone might have a screen 1440 pixels wide (physical), but if you set a div to width: 1440px, it will be huge.
Why? Because of the Device Pixel Ratio (DPR). Phones fake a smaller size—the CSS Viewport—so that text remains readable.
- Physical: The actual light-emitting dots on the screen.
- CSS (Logical): The calculated size the browser reports to your CSS.
For example, a high-end phone might be 1170px wide physically but report a width of 390px to CSS (a 3x ratio).You always design for the 390px.
How to handle this?
Stop worrying about specific device models. Design for ranges. If your layout looks good at 375px (small phone) and 1440px (desktop), it will likely stretch or stack effectively for everything in between.
Useful tools
Screen size and layout simulator
Turn diagonal inches, resolution and device pixel ratio into real viewport sizes and layout guidance.
Viewport and DPR calculator
Convert physical pixels and device pixel ratio into CSS viewport width and height with clear examples.
Safe area CSS helper
Turn platform insets into safe area aware padding snippets with env variables and sensible fallbacks.