Comment cibler l'iPad exclusivement à l'aide de requêtes multimédia CSS ?

Cibler l'iPad exclusivement à l'aide de requêtes multimédias CSS

Dans un environnement multi-appareils, isoler des appareils spécifiques peut être difficile, en particulier lorsqu'ils partagent dimensions similaires. L'un de ces cas consiste à distinguer les iPad des autres tablettes telles que les LG Pads et les Galaxy Tabs, qui ont toutes une largeur d'appareil de 768 px.

Pour résoudre ce problème, les requêtes multimédias CSS offrent une solution. Cependant, les méthodes conventionnelles telles que min-device-width et max-device-width sont inefficaces en raison de la largeur qui se chevauche.

Solution :

Enfin, une méthode exploitant le périphérique height résout le problème :

<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: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />

Cette solution cible les appareils d'une largeur de 768 px, d'une hauteur de 1 024 px et d'une orientation portrait ou paysage, isolant efficacement les iPad.

Pour minimiser les appels HTTP , les requêtes multimédias peuvent être intégrées dans le fichier CSS principal :

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .ipad-portrait { color: red; } /* your css rules for ipad portrait */
}
@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
  .ipad-landscape { color: blue; } /* your css rules for ipad landscape */
}

De plus, reportez-vous aux ressources suivantes pour plus d'informations :

• https://developer.apple. com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html

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!