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

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

La règle CSS @media handheld cible les appareils portables comme l'iPhone et Android. Cependant, l'iPhone ne prend pas entièrement en charge cette règle en raison de sa capacité à restituer le CSS à égalité avec les navigateurs de bureau.

Pour cibler des appareils spécifiques comme l'iPhone, utilisez les requêtes @media :

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

Cette requête cible les appareils avec une largeur d'écran de 480 px ou moins.

La plupart des appareils ont désormais des résolutions plus élevées, comme le Droid X avec une résolution de 854x480. Pour cibler ces appareils, inspectez les caractéristiques physiques de l'appareil avec des requêtes multimédias avancées :

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

Cette requête cible les appareils dotés d'une largeur d'écran de 480 px ou moins et d'une résolution de 163 dpi.

Pour en savoir plus Pour obtenir des informations détaillées sur le ciblage d'appareils spécifiques, reportez-vous à la recommandation du candidat W3 pour les requêtes multimé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!