Viewport Size for Devices

Modern smartphones pack extremely high screen resolutions into small displays — yet a 6-inch phone and a 32-inch monitor can share the same CSS layout width. Why? Because CSS does not work in physical pixels.

Every device has two pixel dimensions: its native screen resolution (the physical pixel count) and its viewport size (the logical CSS pixel grid your stylesheets interact with). The ratio between the two is the device pixel ratio (DPR) — a scaling factor set by the operating system. High-density Retina and AMOLED displays use DPR values of 2×, 3×, or higher, so one CSS pixel maps to 4 or 9 physical pixels, keeping text and layout sharp without shrinking everything to microscopic sizes. Responsive websites target viewport sizes — also called device-width — not raw screen resolutions. The table below lists viewport sizes, screen resolutions, pixel density (PPI), and CSS pixel ratios for hundreds of phones, tablets, and laptops:

Note: some devices allow users to change display resolution or screen zoom, which alters the effective viewport size. The values listed here reflect each device's default resolution setting. For a detailed explanation of how viewport and resolution differ, browse device specs here.