Requête média CSS pour cibler l'iPad et l'iPad uniquement ?

Question

Bonjour, je travaille avec de nombreuses tablettes, iPad, Galaxy Tab, Acer Iconia, LG 3D Pad et ainsi de suite.

• iPad - 1024 x 768
• LG Pad - 1280 x 768
• Galaxy Tab - 1280 x 800

Je veux cibler uniquement l'iPad en utilisant CSS3 media query. Comme la largeur des appareils LG et iPad est de 768px, j'ai du mal à séparer chaque appareil.

J'ai essayé de suivre pour séparer, mais cela ne semble pas fonctionner :

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) /* applied to lg also */
@media only screen and (min-resolution: 132dpi) and (max-device-width: 1024px) and (orientation : portrait) /* applies to lg also */
@media only screen and (device-aspect-ratio: 1024/768) and (orientation : portrait) /* does not work on iPad or LG */

Je ne connais pas le -webkit-device-pixel-ratio et les autres options -webkit* et leurs valeurs à cibler pour l'iPad. Je ne veux pas utiliser JavaScript pour les styles, des idées ?

Answer 1

De nos jours, vous pouvez utiliser un Requêtes média niveau 4 pour vérifier si l'appareil a la capacité pour "survoler" les éléments .

@media (hover: hover) { ... }

Comme l'iPad n'a pas d'état de survol, vous pouvez cibler efficacement les appareils tactiles comme l'iPad.

Answer 2

/*working only in ipad portrait device*/
@media only screen and (width: 768px) and (height: 1024px) and (orientation:portrait) {
  body{
    background: red !important;
  }  
}
/*working only in ipad landscape device*/
@media all and (width: 1024px) and (height: 768px) and (orientation:landscape){
  body{
    background: green !important;
  }   
}

In the media query of specific devices, please use '!important' keyword to override the default CSS. Otherwise that does not change your webpage view on that particular devices.

Answer 3

C'est pour l'ipad

@media all and (device-width: 768px) {

}

c'est pour ipad pro

@media all and (device-width: 1024px){

}