WordPress Retina (HiDPI) Display Support

Posted on September 11, 2012 by Emil Uzelac — 4 Comments ↓

Getting Started with the basic Retina Support for WordPress

text-rendering

Let’s start at the beginning of our stylesheet (style.css)

body {
    text-rendering: optimizeLegibility;
}

body {

text-rendering: optimizeLegibility;

}

Media Queries

moving toward the bottom where technically this would be just enough:

@media
    only screen and (-webkit-min-device-pixel-ratio:1.5), 
    only screen and (-moz-min-device-pixel-ratio:1.5), 
    only screen and (-o-min-device-pixel-ratio:3/2), 
    only screen and (min-device-pixel-ratio:1.5) {

    body {}
}

@media

only screen and (-webkit-min-device-pixel-ratio:1.5),

only screen and (-moz-min-device-pixel-ratio:1.5),

only screen and (-o-min-device-pixel-ratio:3/2),

only screen and (min-device-pixel-ratio:1.5) {

body {}

}

The Future

@media
    only screen and (-webkit-min-device-pixel-ratio:1.5),
    only screen and (min-moz-device-pixel-ratio:1.5),
    only screen and (-o-min-device-pixel-ratio:3/2),
    only screen and (min-device-pixel-ratio:1.5),
    only screen and (min-resolution:192dpi),
    only screen and (min-resolution:2dppx) { 
    
    body {}
}

@media

only screen and (-webkit-min-device-pixel-ratio:1.5),

only screen and (min-moz-device-pixel-ratio:1.5),

only screen and (-o-min-device-pixel-ratio:3/2),

only screen and (min-device-pixel-ratio:1.5),

only screen and (min-resolution:192dpi),

only screen and (min-resolution:2dppx) {

body {}

}

Note that min--moz-device-pixel-ratio is for older Firefox browsers and older version of Firefox is something you’ll less likely be using with your new MacBook Pro anyways

Image Replacement

There are many different techniques out there, such as retina.js, however my favorite is picturefill. This might not be the best answer if you’re looking to replace already published images with HD version.

Resources

High DPI Web Sites (ancient history – not recommended, but good to know)
CSS media queries (Mozilla DEV)
text-rendering (Mozilla DEV)
Bug 474356 – Implement device-pixel-ratio (Mozilla)
How to Develop for HiDPI (“Retina”) without a Retina MacBook Pro

About Emil Uzelac

Husband, Father, WordPress Theme Review Admin, Chicago Fire fan and creator of Responsive Theme. What more do you need?

Tagged with: HiDPI Retina Display
Posted in How to

4 comments on “WordPress Retina (HiDPI) Display Support”

fantasai says:

September 12, 2012 at 10:15 am

I’m not sure why you’re linking to an article that explains the way to unprefix ‘-webkit-device-pixel-ratio’ is to use the standardized ‘resolution’ media query, and then not using the ‘resolution’ media query in your example.

Reply
- Emil Uzelac says:
  
  September 12, 2012 at 3:43 pm
  
  Hi,
  
  Article is there just in case
  
  Thanks,
  Emil
  
  Reply
fantasai says:

September 18, 2012 at 6:58 pm

Just in case of what? Did you even read it? If so, why are you using an unprefixed ‘min-device-pixel-ratio’ query, which doesn’t exist anywhere, instead of ‘resolution’, which is part of the Media Queries standard?

Reply
- Emil Uzelac says:
  
  September 18, 2012 at 7:46 pm
  
  Link removed to avoid confusion (I did read the article and it was tied to this post).
  
  There’s a second (Future use) Media Queries included above.
  As noted in my article fallbacks are not really needed, they’re included anyways.
  
  P.S. I am a Firefox user and min--moz-device-pixel-ratio was edited as well. What I had before sounded like I was saying that we should not be using Firefox and what I meant was an older version of Firefox on brand new Mac.
  
  Thanks for the input,
  Emil
  
  Reply