Comment cibler l'iPad exclusivement avec les requêtes multimédia CSS ?

Requête multimédia CSS : cibler exclusivement l'iPad

Défi :

Cibler spécifiquement les appareils iPad s'est avéré être un défi en raison aux largeurs d'appareil qui se chevauchent avec d'autres tablettes. L'utilisation de requêtes multimédias CSS traditionnelles avec des conditions de largeur min/max ne sépare pas efficacement l'iPad des autres appareils comme le LG Pad et le Galaxy Tab.

Solution :

Une solution réussie La solution implique d’utiliser les conditions de hauteur et d’orientation du dispositif en combinaison avec la largeur du dispositif. Les requêtes multimédias suivantes isoleront les styles spécifiquement pour iPad :

• Orientation portrait :

  <code class="css">@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
    /* iPad Portrait styles */
  }</code>

  Copier après la connexion

• Orientation paysage :

  <code class="css">@media all and (device-width: 1024px) and (device-height: 768px) and (orientation: landscape) {
    /* iPad Landscape styles */
  }</code>

  Copier après la connexion

En tirant parti de ces requêtes multimédias, vous pouvez appliquer des styles spécifiques aux appareils iPad tout en à l'exclusion des autres tablettes avec des largeurs d'appareil similaires. Pour optimiser les appels HTTP, vous pouvez les intégrer dans votre fichier CSS commun existant à l'aide des règles @media fournies.

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!