How ‘Retina Display’ affects CSS pixels

Home / Technology / How ‘Retina Display’ affects CSS pixels

‘Retina display’s pixel density is so high, your eye is unable to distinguish individual pixels.’ – Apple Inc.

With the advent of high pixel density displays, i.e. the iPhone 4 ‘Retina Display’ and many more sure to follow the pixel itself is now a relative unit. I always thought of a pixel as on dot on a screen, and it may have been in the past but that concept has evolved.  Basically with more advanced displays 1 virtual pixel could equal 1.5 physical pixels and so on.

Front-end developers define everything in pixels. Such as, width: 300px or font-size: 12px. With the popularity of the mobile and tablet zoom features, web developers now have to consider what an image will look like at different size ratios. A ‘CSS pixel’ indicates one point on the virtual pixel grid to which our CSS design aligns. This either directly matches the actual device pixel grid on which our content is rendered or it is intelligently scale.

Will higher pixel displays be a massive change for the average web developer? I think it will force us to code with more fluid layouts as well as targeting high density pixel displays with alternate style sheets and media queries. It’s not incredibly inconvenient at the moment, I would prefer this than having to deal with ie6.  Since this concept is still relatively new I think a best practices way to handle high pixel density is still in the testing phases.


Leave a Comment

3 × five =