Converting site for Retina-resolution screens

Question

Apple's new Macbook Pro has a 15" screen with a resolution of 2880x1800. At present it's scaling websites resulting in pixel-doubled images and a layout which appears double-scaled too.

As a web developer how do I go about converting my existing PHP/XHTML/CSS website to take advantage of high-DPI screens?

Answer 1

The following page offers a decent run-through:

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

Icon fonts provide one solution, and the @media types allow additional styles to be used:

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 might help - http://retinajs.com/. You add @2x to your image names cut for retina display and the script does the rest. One pitfall when cutting the images is that everything must be divisible by two - which you already know, but this tripped me up as I made my buttons perfectly but ignored the 1px shadow/line around them, doh! :(

Edit: Just came across a really nice article/tutorial on the subject:

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