Une requête média CSS pour cibler iPad et iPad uniquement?

Bonjour, Je travaille avec plusieurs tablettes, iPad, Galaxy Tab, Acer Iconia, LG 3D Pad, etc.

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

Je souhaite cibler l’iPad uniquement à l’aide de la requête multimédia CSS3. Étant donné que la largeur de l’appareil LG et de l’iPad est identique à celle du 768px, je ne parviens pas à séparer chaque appareil.

J’ai essayé de suivre pour séparer, mais 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 les options –webkit-device-pixel-ratio et autres options -webkit * et leurs valeurs à cibler pour iPad. Je ne veux pas utiliser JavaScript pour les styles, les idées?

Enfin trouvé une solution de: Détecter différentes plates-formes de périphériques en utilisant CSS

   

Pour réduire les appels HTTP, cela peut également être utilisé dans votre fichier CSS commun existant:

 @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: 768px) and (device-height: 1024px) and (orientation:landscape) { .ipad-landscape { color: blue; } /* your css rules for ipad landscape */ } 

J’espère que cela t’aides.

Autres références:

Je suis un peu en retard pour répondre à cette question, mais rien de tout cela n’a fonctionné pour moi.

C’est ce qui a fonctionné pour moi

 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { //your styles here } 

Eh bien même même question et il y a aussi une réponse =)

http://css-sortingcks.com/forums/discussion/12708/target-ipad-ipad-only./p1

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

Je ne peux pas le tester actuellement, alors testez-le =)

Aussi trouvé plus:

http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/

Ou vous vérifiez le navigateur avec du javascript et générez / ajoutez un fichier CSS avec javascript

Vous devez cibler l’appareil par son agent utilisateur, à l’aide d’un script. L’agent utilisateur de l’iPad est:

 Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10 
   orientation and device detection in css3          
iphone landscape
iphone portrait
ipad landscape
ipad portrait
htc desire landscape
htc desire portrait
desktop