Site conversion for retina resolution screens

Question

The Apple new Macbook Pro has a 15-inch screen with a resolution of 2880x1800. It is currently scaling websites, resulting in pixel-doubling images and layout, also scaled.

As a web developer, how do I switch to converting my existing PHP / XHTML / CSS site to take advantage of high-resolution screens?

Answer 1

The following page offers a decent run:

http://www.webmonkey.com/2012/06/make-sure-your-site-looks-good-on-the-new-retina-macbook-pro/

Font icons provide one solution, and @media types allow you to use additional styles:

Example:

@media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .logo { background: url(/path/to/my/highreslogo.png) no-repeat; background-size: 100px 100px; /* rest of your styles... */ } } 

Answer 2

This script may help - http://retinajs.com/ . You add @ 2x to your image names, cut to display the retina, and the script does the rest. One mistake when cutting images is that everything should be divided into two, which you already know, but it worked when I made my buttons perfectly, but ignored the 1px shadow / line around them, doh !: (

Edit: just stumbled upon a really nice article / tutorial on the topic:

http://benfrain.com/how-to-serve-high-resolution-website-images-for-retina-displays-new-ipadiphone4/

Answer 3

The iPhone / iPad retina solution may work on the Mac retina. Specify a higher resolution image, for example:

 background-image: url( [e-mail] );