Frontend Errors : Units, Rendering, Viewport

This skill is the operational reference for CSS length units, viewport-percentage units, font-relative units, the CSS pixel versus device pixel distinction, and the env(safe-area-inset-*) + viewport-fit=cover pairing for notch and Dynamic Island handling. It is an errors-class skill : every section is anchored to a real-world failure mode, with the spec citation that explains it. The skill does NOT cover container-query units (cqw, cqh, cqi, cqb, cqmin, cqmax ; see [[frontend-syntax-css-container-queries]]), clamp() typography (see [[frontend-impl-typography-system]]), or animation jank (see [[frontend-errors-animation-jank]]).

Quick Reference

Floor rules

ALWAYS use 100dvh (or 100svh for guaranteed-fit) for full-height mobile heroes. NEVER use 100vh ; per MDN it currently resolves to 100lvh, so the hero overflows when mobile chrome is visible.
ALWAYS use rem (or %) for font-size. NEVER use em for font-size in nested contexts ; it compounds (1 5 × 1 5 × 1 5 = 3 375 at three levels deep).
ALWAYS use em for properties that should scale WITH the local font-size : button padding, line-height multipliers, icon sizing inside a text element. NEVER use rem for those ; the relationship to the local text breaks.
ALWAYS include viewport-fit=cover in <meta name="viewport"> AND pair every edge-touching surface with env(safe-area-inset-*). NEVER use env(safe-area-inset-*) alone ; without viewport-fit=cover the values are 0 on iOS.
ALWAYS multiply <canvas> backing-store width and height by devicePixelRatio and call ctx.scale(dpr, dpr). NEVER set canvas.width = canvas.style.width ; the result is blurry on Retina.
ALWAYS prefer 100% over 100vw for full-bleed sections that are children of <body>. NEVER use 100vw without considering classic-scrollbar systems where 100vw overflows by the scrollbar width.
ALWAYS use rem-based font sizes that respect the user's browser zoom and font-size preference. NEVER hardcode font-size: 14px ; it blocks accessibility scaling.
NEVER use in, cm, mm, Q for screen layouts. They are anchored to the CSS reference inch (1in = 96px), NOT to physical inches. Reserve for @media print.

frontend-errors-units-rendering-viewport

Frontend Errors : Units, Rendering, Viewport

Quick Reference

Floor rules

Decision tree 1 : Which viewport unit for which use case ?