CSS peut-il cibler spécifiquement les appareils iOS, en excluant les autres avec des tailles d'écran similaires ?

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

Q : Est-il possible d'utiliser CSS pour cibler spécifiquement les appareils iOS tout en excluant d'autres appareils avec des tailles d'écran similaires ?

R : Oui, vous pouvez employer un combinaison de requêtes @media et de règles @supports pour y parvenir :

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

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

Cette approche fonctionne car seul Safari Mobile, le navigateur Web utilisé sur les appareils iOS, prend en charge la propriété -webkit-touch-callout.

Considérations supplémentaires :

• @supports n'est pas pris en charge par Internet Explorer, il peut donc ne pas fonctionner sur appareils utilisant ce navigateur.
• Chrome et Firefox sur iOS utilisent le moteur de rendu WebKit, garantissant que le code ci-dessus fonctionnera sur tous les appareils iOS.
• Il est important de noter qu'Apple peut supprimer la prise en charge de -webkit-touch-callout dans les futures versions iOS.
• Des options alternatives sont disponibles pour cibler des propriétés iOS spécifiques, comme indiqué dans les propriétés CSS prises en charge. page.

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!