Common Device Screen Sizes

CSS pixels (also called logical pixels) are the units browsers use for layout. On high-density screens like Retina displays, one CSS pixel maps to 2 or more physical pixels. An iPhone 17 has a physical resolution of 1206×2622 pixels, but browsers report it as 402×874 CSS pixels — which is what your CSS and JavaScript see.

Full HD (1920×1080) is the most common desktop resolution worldwide. When designing for desktop, 1920×1080 is a safe primary target, with 1366×768 still representing a significant share of smaller laptop screens.

Design mobile-first at 375px width (standard modern smartphone), then scale up with breakpoints at 768px (tablet), 1024px (small laptop), and 1280px or 1440px (desktop). The goal is not to target one size but to ensure your layout works well across all common viewport widths.

iPhones use a device pixel ratio (DPR) of 2× or 3×, meaning the physical screen has 2–3 physical pixels per CSS pixel. For web development only the CSS pixel dimensions matter, since that is what browsers expose to your layout engine and JavaScript.

Viewport width is the area of the browser window available for your web page — it is what window.innerWidth returns and what CSS media queries target. Screen resolution is the total number of physical pixels on the display. On mobile, the two differ significantly due to high pixel densities and the browser chrome.