Avant les iDevices de type Retina il suffisait de tester la largeur en pixel pour détecter les iPhone/iPad. Avec le Retina ceci n’est plus vrai car les résolutions montent à 1 136 x 640 pixels et votre site web est donc affiché comme sur un ordinateur (ce qui peut poser problème sur un écran de 4 pouces seulement)

Utilisation des balises @media

Le code ci-dessous utilise une série de balises @media pour mettre en forme votre site web en fonction de l’appareil qui s’y connecte.

/* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {
}
/* Retina */
@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) {
}
/* iPhone Portrait */
@media screen and (max-device-width: 480px) and (orientation:portrait) {
} 
/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation:landscape) {
}
/* iPad Portrait */
@media screen and (min-device-width: 481px) and (orientation:portrait) {
}
/* iPad Landscape */
@media screen and (min-device-width: 481px) and (orientation:landscape) {
}

source : http://stackoverflow.com/questions/3839809/detect-iphone-ipad-purely-by-css