Différence device-aspect ratio et aspect ratio

bonjour à tous,

Il me semble avoir compris que aspect ratio concerne les pixels réels (la résolution, par exemple 640 px / 1136 px pour un iphone 5) et que device-aspect ratio concerne les pixels css (par exemple 320 px / 568 px sur un iphone 5), mais je voulais avoir une confirmation de votre part à ce sujet, car je n'en suis pas sur. aspect ratio concerne-t-il bien la résolution ou est-ce-qu'il concerne le viewport ?

une deuxième question, dans le cas ou aspect ratio concerne bien la résolution :

imaginions que je veuille viser spécifiquement en mode portrait des tablettes ayant un format d'écran 16/9, faut-il écrire

aspect ratio:16/9

ou

aspect ratio:9/16

?

merci à tous pour vos réponses.

Bonjour,

device-aspect-ratio décrit le format réel du périphérique, la taille "physique".
aspect-ratio décrit la zone d'affichage du site.
J'espère que j'ai été clair

Pour les 16/9, tu laisses comme c'est :

@media screen and (device-aspect-ratio: 16/9)

Cordialement

Bonjour,

En d'autres termes (mais pour dire la même chose) :
- "device" se rapporte à l'ensemble du périphérique
- sans "device", cela se rapporte à la fenêtre du navigateur.

Sur mobile, les deux sont souvent identiques, mais pas sur ordinateur de bureau.

Bonne journée

nef1912 a écrit :

device-aspect-ratio décrit le format réel du périphérique, la taille physique;.
aspect-ratio décrit la zone d'affichage du site.

bonjour, et merci pour vos réponses.
j'avais déjà lu celà mais pour moi c'est difficilement compréhensible, c'est pour cela que je redemande des précisions :

- pour device-aspect-ratio, si je comprends bien, çà concerne les pixels réels (device-width et device-height) ?

- pour aspect-ratio cela se rapporte au viewport sur un mobile ?

nef1912 a écrit :

Pour les 16/9, tu laisses comme c'est :

@media screen and (device-aspect-ratio: 16/9)

pour cette deuxième partie je ne comprends pas du tout : 16/9 correspond au rapport entre les pixels de device-width et les pixels de device-height, non ? donc en mode paysage je comprends que ce soit 16/9, mais en mode portrait ne devrait-on pas écrire 9/16 ?
Modifié par tresor84 (20 Apr 2014 - 18:15)

tresor84 a écrit :

- pour device-aspect-ratio, si je comprends bien, çà concerne les pixels réels (device-width et device-height) ?

Malheureusement, le device-width et device-height no sont pas non plus en pixels réels.
Il s'agit également de valeurs exprimées en "dip" (device independant pixels).

Grosso modo :
- tous les devices non "retina" (la plupart des ordinateurs de bureau par exemple, ou les "anciens" mobiles ou tablettes) vont donner une valeur de device-width correspondant vraiment à leur surface réelle
- les devices haute résolution vont généralement mentir sur leur valeur de device-width

Voir cet article :
http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html

tresor84 a écrit :

- pour aspect-ratio cela se rapporte au viewport sur un mobile ?

Oui

tresor84 a écrit :
donc en mode paysage je comprends que ce soit 16/9, mais en mode portrait ne devrait-on pas écrire 9/16 ?

D'après mes tests sur www.mydevice.io je constate que aspect-ratio varie selon l'orientation, mais pas device-aspect-ratio

Bon Lundi de Pâques

merci pour votre réponse.
passer un bon lundi de pâques çà va être difficile , depuis que je m'intéresse au média queries je passe mon temps à me taper la tête contre les murs (je plaisante bien sur, encore que...)

-pour device-width et device-height, je suis désolé j'avais fait une erreur dans mon précédent message, je voulais parler des pixels css et non pas des pixels réels.

-pour le device-aspect-ratio qui ne varie pas suivant l'orientation, le "point de départ" c'est le mode paysage ou le mode portrait ? je veux dire par là pour une tablette dont le device-width est 720 px et le device-height 1280 px (donc en théorie 9/16 en mode portrait et 16/9 en mode paysage) il reste toujours à 16/9 en paysage comme en portrait ou à 9/16 en paysage comme en portrait ?

-j'en profite pour vous poser une deuxième question : j'avais lu dans vos articles précédents que la valeur de device-width variait en général suivant l'orientation, sauf pour les apples et pour quelques navigateurs. mais vos constatations sur device-aspect-ratio me font me demander si c'est toujours le cas (le fait que device-width varie en général en fonction de l'orientation), ou si vous avez constaté que, comme pour device-aspect-ratio, device-width ne variait pas suivant l'orientation ?

je viens d'avoir l'occasion de tester le mobile d'un ami (samsung galaxy 3) sur votre site mydevice.io, et voilà les infos obtenues :

pour device-aspect-ratio, effectivement la valeur reste la même (0.56, ce qui correspond à 9/16) en portrait comme en paysage. donc j'en conclu que la "valeur de départ" de device-aspect-ratio est celle du mode portrait, et qu'elle est invariable.

Bonjour,

Sur un Samsung Galaxy note, il semble que ce soit l'orientation qu'avait l'écran après le dernier chargement de la page qui est pris en compte pour le calcul du ratio.

Si on teste le device-aspect-ratio après une modification de l'orientation de l'écran, il faut penser à recharger la page si l'on veut voir la nouvelle valeur du ratio s'afficher (bug webkit si j'ai bien compris).

Bon surf !
Modifié par parsimonhi (27 May 2014 - 21:47)