Comment cibler les iPhone 3GS ET l'iPhone 4 dans une requête de média?

Je suis en train de mettre en œuvre d'autres dispositions pour l'iPad/iPhone et iPhones âgées ainsi.

J'ai établi que la meilleure méthode est d'utiliser @media de l'CSS3 spec.

En tant que tels, ces sont mes requêtes de média à la minute:

@media screen and (max-width: 1000px) { ... }

Ci-dessus est pour les petits de bureau et les écrans d'ordinateurs portables.

@media screen and (max-width: 700px) { ... }

Ci-dessus est pour le iPad et le TRÈS petit ordinateur de bureau/ordinateur portable écrans.

@media screen and (max-device-width: 480px) { ... }

Ci-dessus est pour les iPhone 3GS et appareils mobiles en général.

Cependant, le nouvel iPhone 4 avec Steve Jobs est tout-à chanter tout en dansant "retina" afficher signifie qu'il a un ratio de pixel de 2-1 sens 1 pixel semble le navigateur comme 2x2 pixels rend sa résolution (960x640 - sens qu'il va déclencher l'iPad de mise en page plutôt que de l'appareil mobile de mise en page), donc cela nécessite une nouvelle requête de média (seulement jusqu'à présent pris en charge par webkit):

@media screen and (-webkit-min-device-pixel-ratio: 2) { ... }

Maintenant, le truc, c'est... je veux mon beau brillant nouvel iPhone 4 mise a fusionné avec l'iPhone 3GS et l'appareil mobile de mise en page comme ils ont tous deux exactement la même intérieure code CSS,

Donc ma question;

Comment puis-je créer un @media règle que les points de l'iPhone 4, 3GS et autres mobiles pour les mêmes styles?

InformationsquelleAutor Myles Gray | 2011-02-17

55

Parce que l'iPhone et l'iPod touch mesurez max-device-width en pixels logiques plutôt que des pixels de même avec l'écran Retina (comme ils le devraient), l'original de la requête de média utilisé pour l'iPhone devrait être suffisant:
```
@media only screen and (max-device-width: 480px) {
    /* iPhone CSS rules here */
}
```
Vous aurez seulement besoin d' (-webkit-min-device-pixel-ratio: 2) si vous avez besoin de cibler l'affichage de la Rétine séparément.
- Parfait! Merci 🙂
- la deuxième règle only screen and (-webkit-min-device-pixel-ratio: 2) n'est pas nécessaire pour gérer les iphones 4 et 4s parce que nous sommes à l'aide de la requête de média max-device-width. Aussi cette règle sera validé pour le nouvel iPad qui dispose d'un appareil largeur supérieure à 480 pixels, mais un ratio de pixel de 2. Donc @media only screen and (max-device-width: 480px){ } est assez.
- Et puis vient la pomme avec sa rétine Macbook et crée un véritable masse. Tout recommencer
InformationsquelleAutor BoltClock
6

BoltClock la réponse semble assez bon pour moi pour le moment.

Cependant, en pensant à l'avenir, si Apple (ou d'un autre fabricant) libère un autre appareil avec un dispositif de pixel ratio de 2, cette requête des médias seraient utilisés pour ce dispositif.

Je ne pense pas que c'est hors de question de supposer que ce sera le cas, et que le nouveau dispositif pourrait avoir un écran beaucoup plus grand, comme un iPad avec un écran retina.

De faire cette requête seul applicable à l'iPhone 4 et iPhones précédentes (et tout autre appareil de la même taille)
```
@media screen and (max-device-width: 480px), screen and (max-device-width: [[IPHONE_4_WIDTH]]px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone CSS rules here */
}
```
Pas sûr de [[IPHONE_4_WIDTH]] maintenant - n'en avez pas sur moi, et certains sites disent Quatre cent quatre vingt, certains disent Neuf cent soixante. Essayez de remplacer à la fois. (Et laissez-moi savoir ce que vous trouver 🙂 )
- Si l'iPhone 4 max de l'appareil largeur est de 480 (lesquelles il semble que c'est), vous n'aurez pas besoin de la deuxième partie de cette requête (après la virgule). Et la question initiale est nulle et non avenue (comme mentionné par memen ci-dessous)
- Comment est-ce pour la prédiction de l'iPad 3 à cinq mois avant la sortie? 🙂
InformationsquelleAutor mattbilson
5

J'ai été à la chasse pour un moyen de cibler spécifiquement l'iPhone 3 /3GS par la deuxième partie de la demande. La solution la plus acceptable que j'ai trouvé est d'adapter les requêtes de média à l'fixe les paramètres de l'iPhone 3.
```
@media only screen 
    and (device-width:320px) 
    and (device-height:480px) 
    and (-webkit-device-pixel-ratio: 1) { ... }
```
Afin de travailler cette requête nécessite que vous utilisez Safari fenêtre d'affichage de la balise meta pour résoudre le navigateur à 100% avec les éléments suivants:
```
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
```
Il y a un petit nombre de téléphones Android, qui permettra également d'obtenir ramassé sur cette requête. Avec l'Android Market montrant 18,4% de l'actif de téléphones dans le potentiel de la taille de l'écran de la gamme de 320x480, seul un sous-ensemble de qui va correspondre à la device-pixel-ratio à la bourse de navigateur webkit. Pas parfait, mais mieux que rien du tout.

Listes de téléphone résolutions
- Légèrement dépassées mais complète: http://cartoonized.net/cellphone-screen-resolution-by-size.php
- Seulement 3 répertorié comme un potentiel match ici: http://en.wikipedia.org/wiki/Comparison_of_Android_devices
- Android Market snapshot hebdomadaire: http://developer.android.com/resources/dashboard/screens.html
Toutes les informations a été considéré comme le post date.

Aussi par mernen commentaire n ° 2 à son poste, voici les docs pour cible les appareils Android par la densité de pixel: http://developer.android.com/guide/webapps/targeting.html#DensityCSS

InformationsquelleAutor dalethedeveloper
4

Je ne suis pas sûr de suivre votre question. Avez-vous essayé de vos requêtes sur l'iPhone 4? device-width est mesurée en pixels logiques, non pas physiques, donc, l'iPhone 4 s'inscrit toujours le max-device-width: 480px critères.

En va de même pour le haut de gamme des smartphones Android, qui ont un pixel ratio de 1,5: le Nexus One dispose d'un écran physique de 480x800, logique de l'écran de 320x533.
- Vous semblez avoir mal le tour, si c'est l'écran physique est 480x800 et logique est 320x533 cela signifie, c'est-ratio est de 0.X non 1.X comme logique<physique?
- Le ratio est défini comme physique/logique, pas dans l'autre sens: iPhone 4 a 640 physique pixels à 320 logique, donc, ses device-pixel-ratio est de 2. Le Nexus One a 480 pixels pour les mêmes 320 logique ceux, qui donne un ratio de 1,5. Aussi, beaucoup de bas de gamme des appareils Android ont une faible densité des écrans, 240 physique pixels à 320 logique, de sorte que leur ratio de pixel est (sans doute; jamais essayé moi-même) de 0,75.
InformationsquelleAutor mernen

Vous devez vous connecter pour publier un commentaire.