33 posts
  • Affiliate Level 2
  • Author Level 4
  • Collector Level 2
  • Featured Item
+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
  • Elite Author
  • Trendsetter
  • Author Level 7
  • Weekly Top Seller
+7 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.