web-dev-qa-db-fra.com

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

J'essaye d'implémenter des dispositions alternatives pour l'iPad/iPhone et les iPhones plus anciens.

J'ai établi que la meilleure méthode consiste à utiliser @media de la spécification CSS3.

En tant que telles, voici mes requêtes médias à la minute:

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

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

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

Ci-dessus est pour l'iPad et les très petits écrans de bureau/ordinateur portable.

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

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

Cependant, le nouvel iPhone 4 avec écran "rétine" tout-chant et tout-danse de Steve Jobs signifie qu'il a un rapport de pixels de 2-1, ce qui signifie que 1 pixel apparaît en fait au navigateur sous la forme de 2 x 2 pixels pour sa résolution (960x640 - ce qui signifie qu'il déclencher la disposition de l'iPad plutôt que la disposition de l'appareil mobile), ce qui nécessite une AUTRE requête multimédia (prise en charge jusqu'à présent par le webkit):

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

Maintenant, la chose est ... Je veux que ma nouvelle mise en page brillante de l'iPhone 4 soit fusionnée avec la mise en page de l'iPhone 3GS et de l'appareil mobile car ils auront tous les deux exactement le même code CSS interne,

C'est pourquoi je pose ma question;

Comment créer un @media règle qui pointe à la fois l'iPhone 4, le 3GS et les autres mobiles vers les mêmes styles?

iphonecsscss3mobile-safarimedia-queries
50
Myles Gray

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 être suffisante:

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

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

55
BoltClock

La réponse de BoltClock me semble assez bonne pour le moment.

Cependant, en pensant à l'avenir, si Apple (ou un autre fabricant) publie un autre appareil avec un ratio de pixels de l'appareil de 2, cette requête multimédia sera également utilisée pour cet appareil.

Je ne pense pas qu'il soit hors de question de supposer que cela se produira et que le nouvel appareil pourrait avoir un écran beaucoup plus grand, comme un iPad avec un écran rétine.

Pour rendre cette requête uniquement applicable à l'iPhone 4 et aux iPhones précédents (et à tout autre appareil de taille similaire)

@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]] pour le moment - n'en ai pas sur moi, et certains sites disent 48 , certains disent 96 . Essayez de remplacer par les deux. (Et dites-moi ce que vous trouvez :))

6
mattbilson

J'ai cherché un moyen de cibler spécifiquement l'iPhone 3/3GS selon la deuxième partie de la demande. La solution la plus acceptable que j'ai trouvée consiste à adapter les requêtes multimédias aux paramètres fixes d'un iPhone 3.

@media only screen 
    and (device-width:320px) 
    and (device-height:480px) 
    and (-webkit-device-pixel-ratio: 1) { ... }

Pour fonctionner, cette requête nécessite que vous utilisiez la balise viewport meta tag de Safari pour fixer le navigateur à 100% avec le Suivant:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Il existe un petit nombre de téléphones Android qui seront également pris en compte dans cette requête. Le marché Android affichant 18,4% de téléphones actifs sur l'écran potentiel) gamme de taille de 320x480, seul un sous-ensemble de celui-ci correspondra au rapport pixel-appareil sur le navigateur webkit en stock. Pas parfait, mais mieux que rien du tout.

Listes de résolutions téléphoniques

Toutes les informations ont été prises en compte à la date de publication.

Aussi par le commentaire # 2 de Mernen à son article, voici les documents à cibler Android appareils par densité de pixels: http: //developer.Android.com/guide/webapps/targeting. html # DensityCSS

5
dalethedeveloper

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 répond toujours aux critères de largeur maximale de l'appareil: 480 pixels.

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

4
mernen