How ‘Retina Display’ affects CSS pixels

Share This Post

Share on facebook
Share on linkedin
Share on twitter
Share on email

‘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.

More To Explore

Creative

Our Top 5 After Effects Expressions

We use After Effects for all of our video graphics. It’s a very versatile tool that allows anyone with a passing understanding of Photoshop or

Contact Us

  • This field is for validation purposes and should be left unchanged.
Photo of Current360 Associate Creative Director Robert Womack

Rob Womack

If there’s anyone who can honestly say, “Been there, done that,” it’s Rob. After traveling the world for seven years in his 20’s, Rob went to LA and started working in film production. Then it was off to New York, where he learned how to program, which eventually brought him back home to Louisville to build websites. At Current360, Rob heads up our in-house production studio, creating all things digital for our clients — videos, commercials, radio spots, and a lot more. 

When he’s at home, Rob likes to create things like homemade kombucha and music.