Comment puis-je détecter avec précision l'iPhone et l'iPad à l'aide de requêtes multimédias CSS ?

Détection d'un iPhone/iPad avec CSS : un guide complet

Déterminer le type d'appareil d'un utilisateur uniquement via CSS présente un défi courant pour les développeurs . Bien que diverses solutions existent, une méthode populaire consiste à utiliser des requêtes multimédias. Cependant, comme souligné dans une question récente sur un forum de programmation, l'utilisation de @media handheld, uniquement de l'écran et (max-device-width : 480px) { peut ne pas donner les résultats souhaités.

La clé du succès détecter un iPhone ou un iPad à l'aide de CSS consiste à utiliser les requêtes multimédias appropriées. Les exemples suivants fournissent une répartition détaillée :

iPhone et iPod touch :

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

iPhone 4 et iPod touch 4G :

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />

iPad :

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />

Ces requêtes multimédias ciblent efficacement des plages d'appareils spécifiques en fonction de la taille de l'écran et du rapport de pixels. En incorporant ces lignes dans votre feuille de style, vous pouvez appliquer dynamiquement des styles personnalisés pour améliorer l'expérience utilisateur sur les appareils iPhone, iPad et iPod touch.

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!