#1Screen Size & Resolution
Screen Resolution vs. Viewport Size
Screen resolution is the pixel count of the entire display as your OS sees it (in CSS px), while the viewport size is the area where the browser actually renders the web page. The viewport is the content rectangle left after removing browser UI — the address bar, bookmarks bar, extension panels, and the taskbar. That is why the viewport stays slightly smaller than the resolution even with the window maximized.
What Is DPR (Device Pixel Ratio)?
DPR expresses how many physical pixels correspond to one CSS pixel. On a standard Full HD monitor (DPR=1), one CSS pixel maps to one physical pixel; on a high-density display (DPR=2 or 3), one CSS pixel is drawn with a 2x2 or 3x3 block of physical pixels. The result: text and images look smooth, with no visible jagged edges. Typical DPR≥2 devices include iPhones, Retina Macs, Windows machines with high-DPI scaling, and 4K laptops.
How to Calculate Physical Pixels
Physical pixels = CSS resolution × DPR. For example, a 1920×1080 CSS resolution at DPR 2 gives 3840×2160 physical pixels (essentially 4K). A CSS resolution of 1440×900 at DPR 2 gives a physical 2880×1800. Web designers preparing images work from this physical pixel count, serving high-resolution versions via @2x / @3x assets or the srcset attribute.
Using This in Web Design & Responsive Layouts
CSS breakpoints like @media (min-width: 768px) look at the viewport width in CSS px — not physical pixels. A Retina iPad (2048 physical px) is still treated as a 768–1024px viewport, so the correct layout is selected. To keep images sharp, on the other hand, serve resolution-appropriate assets with srcset or image-set().
Mobile-Specific Caveats
On smartphones, the home bar, notification bar, and software keyboard change the viewport height when shown, so CSS 100vh may not match what is actually visible. This is especially pronounced in iOS Safari; the modern recommendation is 100dvh (dynamic viewport height) for layouts that track the real height. This tool reflects the current viewport height in real time, so you can watch the value change on rotation or scroll.
Screen Size vs. Resolution
Resolution is the number of dots on your screen; screen size is its physical dimensions. They're independent — the same resolution looks coarse on a big panel and razor-sharp on a small one.
This tool shows your current resolution and the actual area your browser can render into. Handy for web developers checking layouts and for picking video settings.
What Each Reading Means
Screen resolution and viewport differing is normal: address bars and tabs eat into the space available to the page. On smartphones the gap grows even larger.
| Item | Meaning |
|---|---|
| Screen resolution | Total dots across the entire display |
| Viewport | The area where the browser actually renders pages |
| Scale factor | How much the display is being magnified |
| Orientation | Portrait or landscape |
Text Too Small or Too Large?
- Change your OS display scale — 125% or 150% makes text far easier to read
- You can also zoom just the browser, leaving other apps unchanged
- The higher your resolution, the smaller default text tends to feel
- Zooming shrinks how much fits on screen, so balance readability against workspace