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

Conception d'une requête multimédia CSS pour cibler exclusivement l'iPad

Lorsque vous travaillez avec diverses tablettes comme l'iPad, la Galaxy Tab, l'Acer Iconia et le LG 3D Pad, la tâche de cibler des appareils spécifiques avec des requêtes multimédias CSS peut être difficile, surtout lorsqu'ils partagent des propriétés similaires. Prenons l'exemple de l'iPad et du LG Pad ; les deux ont une largeur d'appareil de 768 px, ce qui rend difficile leur distinction.

Pour résoudre ce problème et cibler l'iPad exclusivement à l'aide de requêtes multimédias CSS3, envisagez la solution suivante :

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

Ceci Cette approche cible précisément l'iPad en définissant des critères spécifiques de largeur, de hauteur et d'orientation de l'appareil.

Alternativement, pour minimiser les requêtes HTTP, vous pouvez intégrer les requêtes multimédias dans votre fichier CSS existant :

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

Référez-vous aux ressources suivantes pour plus d'informations :

• [Détecter différentes plates-formes d'appareils à l'aide de CSS](https://css-tricks.com/snippets/css/detect-différent-device-platforms- using-css/)
• [Autres fonctionnalités CSS3 standard](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!