Comment puis-je détecter les iPhones et iPads à l'aide de requêtes multimédia CSS ?

Détection des appareils iPhone/iPad à l'aide de CSS

Dans leur quête pour optimiser l'expérience utilisateur et fournir un contenu personnalisé, les développeurs Web recherchent souvent des méthodes pour détecter appareils spécifiques uniquement via CSS. L'une de ces approches consiste à différencier les iPhones des iPads à l'aide de requêtes multimédias.

Approche de requête multimédia

La solution proposée dans le fil de discussion existant suggère d'utiliser la règle @media avec les paramètres de l'ordinateur de poche et (max-device-width : 480px). Cependant, cette technique peut ne pas fournir les résultats souhaités.

Solution alternative

Pour résoudre ce problème, une approche plus globale est nécessaire. En tirant parti de requêtes multimédias spécifiques, vous pouvez cibler efficacement les iPhones, les iPads et leurs variantes.

iPhone et iPod Touch

Pour détecter les iPhones et les appareils iPod Touch, utilisez l'outil Requête média suivante :

@media only screen and (max-device-width: 480px) {
  /* Styles for iPhone & iPod Touch */
}

iPhone 4 et iPod Touch 4G

Pour les modèles iPhone 4 et iPod Touch 4G, utilisez la requête média suivante :

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  /* Styles for iPhone 4 & iPod Touch 4G */
}

iPad

Pour identifier les iPad, utilisez la requête média suivante :

@media only screen and (max-device-width: 1024px) {
  /* Styles for iPad */
}

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!