3602 posts Ruben Bristian
  • Sells items exclusively on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $500,000+ on Envato Market
  • Has been part of the Envato Community for over 6 years
+10 more
KrownThemes says

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

Is SVG widely supported?

31 posts
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in Australia
+3 more
CaptainTheme says

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.

734 posts fifty_tons and CodingJack
  • Has referred 1+ members
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has collected 1+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+5 more
50andJACK says

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.

-Jack

by
by
by
by
by
by