How ‘Retina Display’ affects CSS pixels

Share This Post

‘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

Current360 Lunchtime!

Will Lunch Ever Make a Comeback?

Mourned by few, the era of 3-martini lunches is long gone. But, is the era of just having lunch with coworkers, clients, or friends also

Current360 Bad Logo Remix

Time To Update Your Logo

Logos aren’t your brand, but they do represent it. As such, if your brand changes, your logo probably should, too. That aside, there are other

Contact Us

  • This field is for validation purposes and should be left unchanged.

Chaney Given

Chaney is a talented and accomplished designer and illustrator, who has expanded his skill set to include motion graphics and video editing. With nearly a decade of experience, his client work includes Waterstep, Baptist Health, the Archdiocese of Louisville Catholic Schools, First Harrison Bank, and many more