Mediaquerries iphone et ipad

Bonjour

J'ai bien noté que pour les iphones c'étaient légèrement différent:

/** --- Iphone 6 (portrait and landscape) --- */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) { .code-css{}}

/** --- Iphone 6 (portrait) --- */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) { .code-css{} }

/** --- Iphone 6 (landscape) --- */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) { .code-css{}}

Si j'ai prévu les mediaquerries suivantes pour les smartphones, est-ce que cela intègre les iphones, ou est-ce que je dois malgré tout écrire les médiaquerries ci-dessus:

/** --- Smartphones (portrait and landscape) --- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 667px) {
	.code-css{}
}
/** --- Smartphones (portrait) Anciens téléphones (landscape)  --- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 479px) 
and (orientation : portrait) {
	.code-css{}
}
/** --- Smartphones (landscape) Petites tablettes (portrait)--- */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) {
	.code-css{}
}

Cordialement
Modifié par cpalo (08 Jan 2015 - 11:27)

Salut,

Ce qu'il faut, en fait, c'est ne pas sélectionner en fonction d'un modèle de périphérique précis, mais définir des points de rupture en-deçà ou au-delà desquels tu appliques des règles CSS différentes. Autrement dit, pour les règles @media, ne les rends pas rigides en renseignant à la fois la requête min-(device-)width et la requête max-(device-)width, comme tu le fais.

Par ailleurs, n'oublie pas qu'on peut aussi consulter une page Web dans une fenêtre réduite sur des périphériques autres que des smartphones. Il convient donc d'utiliser (min-/max-)width plutôt que (min-/max-)device-width.

Entierèment d'accord.

J'ai 3 ou 4 breakpoints en fonction des périphériques afin d'établir une typographie responsive, Sinon c'est le layout du site qui détermine mes points de rupture en fonction du contenu voulu.

Pour le min-device-width, je l'utilisais afin de pouvoir distinguer un smartphone d'un ordi, ce que ne permet pas le min-width pour les appareils récents.
Ainsi dans mon cas réel, j'ai besoin d'une règle supplémentaire pour les smartphones en mode paysage.

Par rapport à ma question initiale, je vais réécrire le code mais vu les médiaquerries pour les iphones, les dimensions ne correspondent qu'à celles des smartphones en mode portrait.

/** --- Iphone 2G-4S (portrait) --- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : portrait) { .code-css{} }

/** --- Iphone 2G-4S (landscape) --- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) { .code-css{}}