Screen Sizes: Measure the Space a Layout Actually Has
A display's advertised resolution does not tell you how much space a web page has for content.
- Author
- absequ
- Published
- Updated
- Category
- Responsive design
- screen sizes
- responsive design
- practical guide
A display's advertised resolution does not tell you how much space a web page has for content. Browser controls, window size, zoom and device pixel ratio all affect the relationship between physical pixels and layout. Design decisions should start with the viewport and the content, not a catalogue of device screen dimensions.
On this page
The mental model
CSS layout uses CSS pixels, which are not a promise about individual hardware pixels. A high-density screen can map several device pixels to one CSS pixel. The browser window may occupy only part of the display, and browser zoom changes the effective amount of content space.
An image can need a higher-resolution source for a dense screen without needing a wider layout box. Separate responsive layout from responsive image delivery. A card's CSS width and the number of source-image pixels needed for sharpness are related but different decisions.
A practical workflow
Use a fluid container with reasonable gutters and a maximum width. Test the actual inline space available to a component after navigation rails, sidebars and padding are applied. A nominal 1440px viewport does not mean an article inside it has 1440px of usable width.
Keep a small repeatable viewport matrix, then add boundary tests around layout transitions. Include long content and larger text settings. A screenshot at three popular sizes is a starting point, not proof that the layout works at every size in between.
Worked example
.page-content {
box-sizing: border-box;
inline-size: 100%;
max-inline-size: 72rem;
padding-inline: clamp(1rem, 3vw, 2rem);
margin-inline: auto;
}
.page-content img { max-inline-size: 100%; block-size: auto; }Here the outer container is intentionally centered, while its contents keep their normal reading alignment. The maximum width is a design choice that should be evaluated with real text and mixed content. It should not silently override an article block's explicitly assigned grid columns.
Inspect actual bounding boxes in a browser. Compare a block's width with its assigned cell, and compare the document's scroll width with its client width. Overflow hidden can conceal a broken layout without making the clipped content usable, so do not treat it as the default repair.
Failure modes and security
Large fixed widths can force horizontal page scrolling or push controls under navigation. Very narrow fixed measures can create unused space and premature wrapping. Both failures can appear even when a layout uses a responsive framework. Review the rendered result rather than assuming a component's name guarantees responsiveness.
Do not disable browser zoom to force a screenshot to fit. Text enlargement and zoom are legitimate user needs. Keep critical controls and status messages available when the viewport effectively becomes smaller, and let long code or tables scroll inside their own panels when necessary.
Practice and verification
Measure a page at 390, 768 and 1440 CSS pixels, then inspect the space left after its fixed shell. Add a long email address, a wide code line and a translated heading. Determine whether each overflow belongs inside a component or indicates a page-level defect. Record the measurements and explain the distinction between viewport width, content width and source-image resolution.
References
CSS length units — MDN
Responsive web design — MDN
Responsive images — MDN