Requête média ipad vs iphone4

Modifier votre iPhone 4 requête de média pour cible à haute densité de pixels affiche (rétine = iPhone4)

@media screen and (max-device-width: 640px), screen and (-webkit-min-device-pixel-ratio: 2) and (orientation:portrait) { ... }

---

N'ai pas d'avis, vous a rouvert la question de l'extension donc, ici, est une version retravaillée de la réponse de cibler à la fois les iphones (3 et 4) et ipad.

Répartition de ce à quoi vous devez vous attendre:

• Régulier sur les navigateurs, vous devriez obtenir le teal couleur d'arrière-plan.
• orange sur un ipad (paysage).
• black sur un ipad (portrait)
• red sur un iphone 4 (portrait)
• pink sur un iphone 4 (paysage)
• green régulier sur les smartphones, les.g Androïdes (paysage)
• purple régulièrement smartphone (portrait)

CSS

body {
background-color:teal;
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
body {
background-color:yellow;
}
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
body {
background-color:orange;
}
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
body {
background-color:black;
}
}
/* iPhone 4 - (portrait) ---------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 2) and (orientation:portrait),
only screen and (min-device-pixel-ratio : 2)  and (orientation:portrait){
body {
background-color:red;
}
}
/* iPhone 4 - (landscape) ---------- */
@media screen and (-webkit-min-device-pixel-ratio : 2) and (orientation:landscape), screen and (min-device-pixel-ratio : 2) and (orientation:landscape){
body {
background-color:pink;
}
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px)
and (max-width: 480px) {
body {
background-color:green;
}
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
body {
background-color:purple;
}
}`<!-- language-all: lang-css -->

J'ai reformaté le @media requêtes trouve dans cette belle l'article plus au CSS-tricks afin de se conformer à certaines iphone4-bits spécifiques, mais l'ensemble de cette requête de média doivent couvrir à la fois les iphones (3 et 4 avec le support des requêtes) et l'ipad en tant que bien.

Voici une démo que vous pouvez essayer dans votre i-dispositifs.

http://jsfiddle.net/andresilich/SpbC3/4/show/

Et vous pouvez également essayer les requêtes les plus fréquentes à http://quirktools.com/screenfly/ pour voir comment ils se comparent. Une chose cependant, la screenfly site ne fait pas de différence entre l'iphone 3 et 4, car régulièrement des navigateurs sauter le webkit seulement -webkit-min-device-pixel-ratio : 1.5 pixel nombre de taux de sorte que vous obtiendrez de meilleurs résultats à des tests dans votre appareil.

Découvrez http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

J'ai essayé ce lien http://jsfiddle.net/andresilich/SpbC3/4/show/ dans la réactivité de l'outil de test comme http://mattkersley.com/responsive/ et http://ipadpeek.com .J'ai vu le paysage et le mode portrait affichant le même point de vue. Est-il un problème avec ces outils?