Discuss: A Pixel Identity Crisis
by Scott Kellum
- Editorial Comments
2 But is it a pixel?
My question (not directed at Scott as much as the general web standards community): Why bother referring to reference pixels as pixels at all? There’s no reason we have to hijack a term that has a relatively clear definition otherwise. Now would be a perfect time to coin a better term.
For the sake of conversation, let’s say we instead refer to reference pixels as specks. If nothing else, it’d be easier to explain the concept of a pixel-to-speck ratio than it would be to explain a physical-pixel-to-reference-pixel ratio.
posted at 07:52 am on January 17, 2012 by NickSherman
3 It is complex
@Yuvalik
Yes, the definitions do seem overly complex and confusing. The web deals with a lot of legacy code on both the browser and the HTML/CSS sides and I assume this is the reason why a new unit wasn’t created.
However the W3C definition of a pixel, even though it is full of trigonometry, offers a unique and wonderfully consistant unit across all kinds of devices. Unlike millimeters or inches a pixel consistently scales relative to the assumed viewing distance. An accurate pixel will appear the same size no matter if it is projected on a 50ft screen or held up close on a mobile phone. Millimeters will remain the same physical size on both devices causing them to be almost invisible when projected onto a viewport.
posted at 08:57 am on January 17, 2012 by Scott Kellum
4 A pixel in CSS never has been a device pixel...
…not really. The reference pixel was first described in CSS 1 in 1996: http://www.w3.org/TR/CSS1/#length-units
posted at 11:52 am on January 17, 2012 by Nick Fitzsimons
5 Any Different?
Would this method be any different than using something like <meta name=“viewport” content=“initial-scale=1.0, width=device-width” /> outlined here https://developer.mozilla.org/en/Mobile/Viewport_meta_tag ?
posted at 12:48 pm on January 17, 2012 by Dan Ciupuliga
6 re: A PIXEL IN CSS NEVER HAS BEEN A DEVICE PIXEL..
@Nick Fitzsimons
Thanks for pointing that out Nick. It always amazes me how forward thinking the W3C is. Few user agents have altered their pixel sizes from hardware pixel sizes until recently though.
“If the pixel density of the output device is very different from that of a typical computer display, the UA should rescale pixel values.”
posted at 12:57 pm on January 17, 2012 by Scott Kellum
7 Viewport scale
@Dan Ciupuliga
Hi Dan, that method is used to properly scale and zoom the viewport. It does not indicate what the pixel ratio is on devices. Theoretically you could change the “initial-scale” value on different devices depending on what zoom you prefer. This code is HTML so you would not be able to use CSS media queries to change the value.
posted at 01:17 pm on January 17, 2012 by Scott Kellum
8 RE: VIEWPORT SCALE
Gotcha. Thanks for clarifying.
posted at 05:25 pm on January 17, 2012 by Dan Ciupuliga
9 dpi bias on android
If the intent is to have full control over actual device pixels to then scale things, at least on Android you can also add target-densitydpi=device-dpi to a viewport meta. this turns off the built-in dpi bias you get, even when width=device-width. unfortunately, iOS doesn’t support this (yet?).
[and yes, full disclosure first: I work for Opera] in terms of having to add the above meta to the HTML, rather than being able to use CSS MQs: that’s exactly why I personally think the CSS Device Adaptation spec would be cool to have across browsers…but for now, it’s only supported in Opera Mobile (and possibly Opera Mini, but I’d have to double-check).
posted at 08:41 pm on January 17, 2012 by patrick lauke
10 re: DPI BIAS ON ANDROID
Great tip Patrick, thanks. The real issue is with device makers inconsistently implementing pixels and compensating for those inconsistencies. The media queries outlined in this device adaptation spec look incredibly useful for identifying problem areas provided the values returned are accurate.
posted at 09:12 pm on January 17, 2012 by Scott Kellum
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)

1 Too complex or am I missing the point?
I remember in the late 90’s being at a seminar where someone spoke about measurements for monitors. It was suggested that the mm should be ‘layered’. In other words, devices should have a mechanism that translates their pixels to mm. At the time it was thought this should be done in hardware, but as I understand it, the reference pixel is exactly that. They just named it differently which makes it more complex than needed. Why would you want to define lengths in a virtual dimension when you could just as easily do it in mm? In other words, I do not understand why the
already existentmm has not been used for this technology?posted at 06:20 am on January 17, 2012 by Yuvalik