Understanding Hardware and CSS Pixels

Many people are confused on why the stated resolution for a device like the iPhone doesn’t match to a viewport size reported by the browser for media queries. The difference is between hardware pixels and CSS (reference) pixels reported by the browser.

It has to do ultimately with pixel density, so even though the iPhone has a portrait reported width of 640 pixels by Apple (for iPhones greater than the iPhone 4), your media query will only respond to 320 pixels (although remember to use relative media queries and only around content not devices).

Here are some articles to help you understand the topic. The first is the most important, and the other two just elaborate on the issues.

• A Pixel Identity Crisis
• Mo’ Pixels Mo’ Problems
• Vexing Viewports

Here are two references on popular device reported resolutions and viewports.

• DPI Luv (hardware pixels)
• Viewport Sizes (CSS/reference/viewport pixels)

Targeting viewport widths and targeting high-resolution displays are also two different issues. There are ways to determine high-resolution (HiDPI/”retina”) displays in case you want to add high-resolution imagery, and here is a good media query to use.