Comment cibler les navigateurs iPhone et Android avec des requêtes CSS @media ?

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 plateformes, comme l'iPhone via Safari, ne tiennent pas compte de 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) :

<link rel="stylesheet" href="path/to/iphone.css" media="only screen and (max-device-width:480px)" />

Ciblage des appareils avec des résolutions plus élevées

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 :

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="shetland.css" />

Ressources supplémentaires

Des informations supplémentaires peuvent être trouvées dans le A fourni. Articles List Apart et recommandation W3 pour les requêtes des médias.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!