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

Question

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

Demandé el 25 de Novembre, 2011: Quand la question a-t-elle été
65691 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la 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 ?

Demandé el 25 de Novembre, 2011 par Hossain Khan

0 votes

Device-aspect-ratio fonctionnera sur l'iPad, mais la valeur correcte à utiliser est 768/1024

Commenté el 26 de Novembre, 2012 par Tom Clarkson

Answer 1

5 Réponses

Answer 2

150voto

Hossain Khan Points 1444

J'ai finalement trouvé une solution à partir de : Détecter les différentes plateformes d'appareils à l'aide de CSS

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

Pour réduire l'appel HTTP, vous pouvez également utiliser cette méthode 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: 1024px) and (device-height: 768px) and (orientation:landscape) {
  .ipad-landscape { color: blue; } /* your css rules for ipad landscape */
}

J'espère que cela vous aidera.

Autres références :

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

Répondu el 29 de Février, 2012 par Hossain Khan (1444 Points )

0 votes

Au cas où vous vous poseriez la question, cela changera les styles si l'appareil est tourné sans avoir à utiliser Javascript.

Commenté el 17 de Avril, 2013 par Dave Sag

1 votes

Tous les iPads ont la même résolution ? Je pensais qu'il y avait 3 résolutions pour différentes versions. Et je suppose qu'il est impossible de prévoir si d'autres résolutions vont sortir.

Commenté el 12 de Décembre, 2013 par user322222

0 votes

À l'époque où je travaillais dessus, l'iPad Mini n'existait pas. Je ne sais donc pas quelle est la résolution d'écran qu'il indique. Mais, cette requête CSS Media Query a fonctionné pour l'iPad retina. Donc, il est préférable de tester sur des appareils réels pour être plus sûr.

Commenté el 13 de Décembre, 2013 par Hossain Khan

Afficher 7 autres commentaires

Answer 3

12voto

Baig Points 632

Je réponds un peu tard à cette question, mais aucune des propositions ci-dessus n'a fonctionné pour moi.

Voici ce qui a fonctionné pour moi

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

Répondu el 11 de Juin, 2015 par Baig (632 Points )

Answer 4

6voto

Beatriz Oliveira Points 601

Vous devez cibler le dispositif par son agent utilisateur, en utilisant un script. L'agent utilisateur pour 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

Répondu el 25 de Novembre, 2011 par Beatriz Oliveira (601 Points )

0 votes

La détection sur le serveur présente certains avantages. Une fois la détection effectuée sur le serveur, j'ajouterais une classe au corps de la réponse afin de faciliter la sélection CSS.

Commenté el 10 de Avril, 2014 par Oren

1 votes

C'est la meilleure réponse. La détection de dispositifs tiers spécifiques basée sur la résolution en pixels et l'orientation exactes de l'écran n'est pas à l'épreuve du temps et ne fait pas partie de l'objectif de CSS. Les passerelles d'agent utilisateur côté serveur ne sont jamais une bonne solution car elles sont discriminatoires.

Commenté el 11 de Juin, 2014 par Filip Dalüge

1 votes

@FilipDalüge C'est loin d'être la meilleure réponse. Tant que vous utilisez des requêtes média pour résoudre les problèmes d'espacement CSS, il importe peu que ce soit à l'épreuve du temps ou que cela fonctionne sur d'autres appareils ayant exactement la même taille d'écran. La réponse ci-dessus vise un exact version de Mobile Safari qui est fondamentalement inutile, car elle ne pourra même pas gérer tous les appareils iPad d'une même génération.

Commenté el 24 de Juin, 2015 par Alex W

Afficher 1 autres commentaires

Answer 5

4voto

Daniel Ruf Points 2173

Tout à fait la même question et il y a aussi une réponse =)

http://css-tricks.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 s'il vous plaît, testez-le =)

J'en ai aussi trouvé d'autres :

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 du javascript.

Répondu el 25 de Novembre, 2011 par Daniel Ruf (2173 Points )

Answer 6

2voto

Daniel Raja Singh Points 40

<html>
<head>
    <title>orientation and device detection in css3</title>

    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="iphone-portrait.css" />
    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="iphone-landscape.css" />
    <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" />
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 1184px) and (orientation:portrait)" href="htcdesire-portrait.css" />
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 390px) and (orientation:landscape)" href="htcdesire-landscape.css" />
    <link rel="stylesheet" media="all and (min-device-width: 1025px)" href="desktop.css" />

</head>
<body>
    <div id="iphonelandscape">iphone landscape</div>
    <div id="iphoneportrait">iphone portrait</div>
    <div id="ipadlandscape">ipad landscape</div>
    <div id="ipadportrait">ipad portrait</div>
    <div id="htcdesirelandscape">htc desire landscape</div>
    <div id="htcdesireportrait">htc desire portrait</div>
    <div id="desktop">desktop</div>
    <script type="text/javascript">
        function res() { document.write(screen.width + ', ' + screen.height); }
        res();
    </script>
</body>
</html>

Répondu el 18 de Décembre, 2014 par Daniel Raja Singh (40 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: