Comment détecter les appareils iPhone et iPad avec CSS ?

Détection d'iPhone/iPad avec CSS : dépannage et solutions

La question initiale cherchait à détecter les appareils iPhone et iPad exclusivement via le style CSS. Une première tentative de mise en œuvre d'une solution utilisant "@media handheld, uniquement écran et (max-device-width : 480px)" s'est avérée infructueuse.

La solution :

Détecter efficacement l’iPhone, l’iPad et leurs variantes spécifiques nécessite une approche plus globale. Les requêtes multimédias CSS suivantes ciblent spécifiquement différentes dimensions d'écran et ratios de pixels :

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" />

En incorporant ces requêtes multimédias dans votre feuille de style, vous pouvez vous assurer que des styles CSS spécifiques sont appliqués en fonction sur le type d'appareil détecté. Cette approche offre une plus grande flexibilité et vous permet d'adapter l'apparence de votre site Web ou de votre application à différents 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!