33 posts
  • Has referred 10+ members
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Had an item featured on Envato Market
+4 more

My upcoming WP pluign supports Retina displays. I mainly had to iclude 2 sizes of all images and a little bit of CSS . The menu icon was a little bit tricky though. To target Retina displays with CSS I use
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
             //your CSS here
Detecting Retina with JS:
var isRetina = window.devicePixelRatio > 1;

Just little typo fixed up above from 32 to 3/2 for opera targeting.

It’s nice to give your users an option to upload a ‘retina’ logo. You don’t really need to use a fixed area though, just a fixed height or width should work.

What’s wrong in using vectors? There’s SVG around.
Is SVG widely supported?

Very supported – just not IE 8 and below really.

736 posts fifty_tons and CodingJack
  • Had an item that became a weekly top seller
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Became a Top 20 Author of the Month
+6 more

Seems like SVG is the best option. Because then the logo would be future-proof from the next retina upgrade we have to deal with. Plus SVG has been adopted by HTML5 so it isn’t going anywhere.