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

Cibler l'iPad exclusivement avec des requêtes multimédias CSS

Cibler des appareils spécifiques avec des requêtes multimédias CSS peut être difficile, en particulier lorsque les appareils partagent des dimensions d'écran similaires. Pour isoler l'iPad, envisagez ces approches :

Utilisation de Device-Width et Device-Height :

La requête multimédia fournie peut être affinée en spécifiant à la fois la largeur et la largeur de l'appareil. hauteur, qui est unique à l'iPad :

@media only screen and (min-device-width: 768px) and (max-device-width: 768px) and (min-device-height: 1024px) and (max-device-height: 1024px)

Combiner la largeur et la résolution de l'appareil :

Vous pouvez également combiner la largeur de l'appareil avec la résolution de l'appareil :

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (min-resolution: 132dpi)

Utilisation de requêtes multimédia liées à des feuilles de style spécifiques :

Pour une meilleure efficacité, vous pouvez créer des feuilles de style distinctes adaptées à l'iPad et les inclure de manière conditionnelle en fonction du média spécifique à l'appareil. requêtes :

<code class="html"><link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape)" href="ipad-landscape.css" /></code>

Incorporation des requêtes multimédias dans CSS :

Pour réduire les requêtes HTTP, vous pouvez définir des règles CSS spécifiques à l'appareil dans votre feuille de style principale :

<code class="css">@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .ipad-portrait { color: red; }
}</code>

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!