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 2024 Predictions crystal ball

2024 Predictions

Thanks to everyone who responded to our 2024 Predictions survey last month. While the sample size wasn’t quite the size of a Pew or Nielsen,

Contact Us

"*" indicates required fields

I am not a robot
Ed Sharp Current360 headshot

Ed Sharp

Ed brings 15 years of traditional and digital media sales experience to the agency, giving us a perspective most agencies don’t have. When he’s not working or seeking new knowledge, Ed hangs out with his wife, two kids, two dogs, one cat, and a hamster. And yes, the cat and hamster are best friends.

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