media query conditional CSS for iPhone 4

gistfile1.css

/* normal clients -- desktops */

#header a.logo {
    padding-left: 210px;
    background: url('/images/logo-200x200.png') no-repeat 0 50%; /* this is our original graphic at say 200x200px */
}


/* older iPhones, Android, Palm, etc. assuming that their screen is 480px long on the longest side */

@media only screen and (max-device-width: 480px) {
    #header a.logo {
        padding-left: 70px;
        background-image: url('/images/logo-64x64.png'); /* this is our mobile sized graphic at 64x64px */
    }
}


/* iPhone 4 */

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    #header a.logo {
        background-image: url('/images/logo-128x128.png'); /* this is our iPhone 4 sized graphic at 128x128px */
        -webkit-background-size: 64px 64px; /* set to the originally intended mobile size; due to a bug in Webkit, both dimensions should be specified even if they are the same */
    }
}


/* Bonus: iPad */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    #header a.logo {
        padding-left: 134px;
        background-image: url('/images/logo-128x128.png'); /* we give the iPad a larger image than mobile, but smaller than the original */
    }
}


/* Extra Credit: mythical Retina Display iPad */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio:2) {
    #header a.logo {
        background-image: url('/images/logo-256x256.png');
        -webkit-background-size: 128px 128px;
    }
}