Retina Logos In Themes - How Do You Do Yours?

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

Is SVG widely supported?

revaxarts said
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.

RubenBristian said

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

Is SVG widely supported?

Very supported – just not IE 8 and below really.

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