CSS Pixels vs Physical Pixels

CSS pixels are logical units used by browsers and design systems. Physical pixels are the actual hardware dots on a display. On modern devices, these values are often not the same, which is why a coordinate can look wrong if you compare different tools without accounting for scaling.

If you are building interfaces, reviewing screenshots, or checking click targets, you need to know whether your coordinate values are tied to display logic or hardware pixels.

Why the Difference Matters

A browser can report CSS-based positions while the device itself renders at a denser physical resolution. That means the same visible point can produce different coordinate values depending on which measurement mode you choose.

Simple Example

A screen may look 1000 pixels wide to the browser but actually be 2000 physical pixels wide. In that case, a point reported at X=500 in CSS pixels may correspond to roughly X=1000 in physical pixels.

• Use display mode when you care about browser or UI layout behavior.
• Use native mode when you care about actual screen density or hardware-level positions.
• Document which mode you used when sharing coordinate values.

Related Guides

Open the tool | How DPI Scaling Affects Coordinates | Screen Coordinates for Mac