[Résolu] Device-width, media queries, technique de travail

Bonjour,

Il semble que ma question rejoigne la précédente, mais malgré la lecture des articles récents relatifs au viewport, j'ai du mal :

Lorsque l'on code ses media queries, et que l'on se base par exemple sur un site comme celui-ci pour les valeurs : http://mobitest.me/devices/
Faut-il se référer exclusivement à la colonne device-width pour écrire ...and (max-width = "xxx") ?

Parce que, que je mette une meta viewport avec un content ="initial-scale=1.0" ou un content ="width=device-width, initial-scale=1.0", un galaxy note m'affiche dans les 2 cas 400 de large, un gs2 320...
ET comme jusqu'à présent je retaillais mon navigateur pour choisir mes points de rupture, ben j'ai visiblement pas bon...

Bonjour,

Oui, je confirme que les périphériques se réfèrent à leur largeur déclarée en "pixels indépendants" (bref, "device-width") et non à leur largeur réelle.

Plus précisément, le déroulement est celui-ci :
1- par défaut, la largeur de la fenêtre du périphérique est définie par le navigateur (ex. Safari = 980px)
2- si une balise HTML viewport (ou un CSS @viewport) est définie en width=device-width, initial-scale=1.0, alors le navigateur adopte la valeur de "device-width".

La définition "réelle" (ex: 640px pour l'iPhone5) n'est pas prise en compte.

Ok, merci beaucoup

C'est chaud chaud de coder la partie responsive si on veut que ça passe sur un maximum de mobiles ET que ça fasse la même chose en retaillant un navigateur PC... ^^

Et quand je lis vos articles (entre autre), je m'aperçois qu'on est loin d'avoir encore une base stable.

Manhattan a écrit :
Et quand je lis vos articles (entre autre), je m'aperçois qu'on est loin d'avoir encore une base stable.

Tout à fait : le Responsive est très jeune.
Trop jeune pour bénéficier de standards et d'implémentations stables.
... Mais assez vieux pour être demandé par tous nos clients

Ce qui m'intrigue c'est le fait qu'avec un

<meta name="viewport" content="initial-scale=1.0">

les media queries max-width détectent la même valeur du mobile (400 pr un note, 320 gs2) qu'avec un

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

Et ce qui me chagrine surtout, c'est que si l'on est obligés de se baser sur les device-width, cela veut dire que l'on propose la même chose pour un gs3 et gs4 alors que le premier émule du 720 et le second du 1080 mais que les 2 ont un réel de 320px (idem pour autres marques) ?
Modifié par Manhattan (29 Oct 2013 - 13:40)

Manhattan a écrit :

Et ce qui me chagrine surtout, c'est que si l'on est obligés de se baser sur les device-width, cela veut dire que l'on propose la même chose pour un gs3 et gs4 alors que le premier émule du 720 et le second du 1080 mais que les 2 ont un réel de 320px (idem pour autres marques) ?

Oui c'est un choix des constructeurs, pour éviter de casser tout ce qui a été fait rétrocompatiblement.

Bien, je vous remercie, j'ai donc les réponses à toutes mes interrogations
Je marque le sujet comme résolu.