Comment cibler l'iPhone 3GS ET l'iPhone 4 en une requête multimédia?

Question

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

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

Comme tel, ce 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.

Toutefois, 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 des points de l'iPhone 4, 3GS et autres mobiles pour les mêmes styles?

Answer 1

Parce que l'iPhone et l'iPod touch mesurent max-device-width en pixels logiques plutôt qu'en pixels physiques, même avec l'écran Retina (comme il se doit), la requête multimédia d'origine utilisée pour l'iPhone devrait suffire:

 @media only screen and (max-device-width: 480px) {
    /* iPhone CSS rules here */
}
 

Vous n'aurez besoin que de (-webkit-min-device-pixel-ratio: 2) si vous devez cibler l'écran Retina séparément.

Answer 2

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.

Pour 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 480, certains disent 960. Essayez de remplacer à la fois. (Et laissez-moi savoir ce que vous trouver :) )

Answer 3

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 de la 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.

Les 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 ont été considérés comme des 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

Answer 4

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

Il en va de même pour les smartphones Android haut de gamme, qui ont un ratio de pixels de 1,5: le Nexus One dispose d'un écran physique de 480x800, un écran logique de 320x533.