Comment puis-je cibler les appareils iOS à l'aide de requêtes multimédia CSS ?

Ciblage des appareils iOS à l'aide de requêtes multimédias CSS

Dans le domaine du responsive design, il devient nécessaire d'adapter les pages Web à des appareils spécifiques. Un besoin courant est de cibler uniquement les appareils iOS.

Requête multimédia pour les appareils iOS

Bien qu'il n'existe pas de requête @media dédiée uniquement pour iOS, il existe une solution utilisant la règle @supports :

@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */ 
}

@supports not (-webkit-touch-callout: none) {
  /* CSS for other than iOS devices */ 
}

Principe derrière le Requête

Cette requête exploite la propriété "-webkit-touch-callout", qui est implémentée exclusivement par Safari Mobile sur iOS. En vérifiant sa prise en charge, nous pouvons distinguer les appareils iOS des autres.

Avantages et mises en garde

• Cette technique permet un ciblage précis des appareils iOS sans affecter les autres plates-formes avec des dimensions d'écran similaires.
• Il est important de noter que @supports ne fonctionne pas sur Internet Explorer.
• Bien qu'il fonctionne actuellement sur iOS, rien ne garantit qu'Apple ne supprimera pas progressivement le support dans les versions futures.

Approches alternatives

Le site Web des développeurs d'Apple propose une liste complète des propriétés CSS prises en charge par Safari sur iOS. En recherchant ces propriétés, vous pourrez trouver des alternatives supplémentaires pour cibler les appareils iOS.

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!