Charger le fichier css pour l'ipad seulement

Question

Im essayant de charger un dossier de css pour l'ipad seulement. J'ai essayé ceci:

<link href="/css/ipad.css" rel="stylesheet" media="all and (max-device-width: 1024px)" type="text/css"> 

Il fonctionne pour iPad mais si je baisse ma résolution de 1024 par 768 sur mon bureau et vue sur le site dans firefox les charges ipad de feuille de style aussi bien. J'ai donc essayé:

<link href="/css/ipad.css" rel="stylesheet" media="all and (max-device-width: 1024px) and (orientation:landscape)" type="text/css"> 

Mais toujours le même problème. Comment puis-je m'assurer que cette feuille de style se charge UNIQUEMENT si elle est affichée sur un iPad?

Answer 1

Quelle technologie utilisez-vous? Si vous avez un contrôle sur ce que vous affichez (côté serveur) sur la page, vous pouvez vérifier l'en-tête USER-AGENT dans la requête. S'il contient la chaîne iPad, alors affichez la balise css, sinon, ne l'incluez pas.

Si vous livrez simplement du code HTML statique, cela ne fonctionnera pas.

Answer 2

Cette question pourrait aider:

Detect iPhone/iPad purely by css

Et ceci:

http://techcline.com/2010/04/cross-browser-issues-detect-ipad-users-through-user-agent-script.html

Answer 3

De: http://css-tricks.com/snippets/css/ipad-specific-css/

Cela fonctionne mieux pour moi.

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

/* Pour les dispositions générales iPad */ }

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { 

/* Pour mises en page portrait seulement */ }

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { 

/* Pour mises en page paysage seulement */ }

Answer 4

En raison de nombreuses tailles d'écran différentes et les résolutions Je n'ai pas pu utiliser uniquement les requêtes de média pour ce problème.

J'ai inclus http://www.modernizr.com/ dans tous mes projets, donc j'ai été capable d'utiliser une combinaison. Modernizr va ajouter une classe de .touch sur les appareils tactiles. Je suggère d'essayer d'utiliser .touch pour déterminer que ce n'est pas un PC, puis la requête des médias pour affiner quel appareil mobile c'est.