Prise en charge CSS @media handheld sur les navigateurs iPhone et Android

Dans le but d'adapter les pages Web aux navigateurs mobiles, les développeurs peuvent tenter d'utiliser Requêtes portables CSS @media pour modifier l'apparence de la page. Cependant, certaines plates-formes, comme l'iPhone via Safari, ignorent cette approche.

Approche alternative pour iPhone et Android

Pour remédier à cette limitation, la solution recommandée est de utiliser des requêtes multimédias qui spécifient des caractéristiques spécifiques de l’appareil. Le code suivant montre le ciblage de l'iPhone (ou de tout appareil doté d'une largeur d'écran de 480 px ou moins) :

Ciblage des appareils avec une Résolutions

Comme indiqué, les appareils comme le Droid X ont des résolutions plus élevées qui peuvent ne pas être détectées par la requête susmentionnée. Pour cibler de tels appareils, les requêtes multimédias peuvent inspecter les caractéristiques physiques de l'appareil, telles que la résolution :

Supplémentaire Ressources

Des informations supplémentaires peuvent être trouvées dans les articles A List Apart fournis et dans la recommandation W3 pour les requêtes multimédias.