version mobile device width et initial scale

Version imprimable

30/09/2013, 19h35
userparis

version mobile device width et initial scale

bonjour à tous, j'ai une question assez simple au sujet de la création de site version mobile.

J'ai remarqué qu'en mettant dans ma page html un simple :

Code:

<meta name="viewport" />

donc sans indiquer

Code:

content="initial-scale=0.5, width=device width"

qu'on utilise alors toute la largeur de l'écran. je m'explique (d'après ce que j'ai compris) : les smartphone ont une largeur d'environ 320 px mais en réalité ils ont plus de 900 px. Avec le code ci-dessus (sans scale et device width) j'utilise donc les 900px ce qui a priori est une bonne chose puisqu'on a plus de place pour mettre les éléments du site même si très souvent il faut zoomer pour une meilleur lisibilité. Question : utiliser vous les 900px px ou bien les 320 pour afficher votre site version mobile ? si oui pour quelles raisons ?

Avec device width et scale a 1, l'affichage se fait sur 320 px donc la tout est zoomé et on a moins de place et il faut réagencer la page en mettant les blocs en dessous des autres avec une meilleur lisibilité surtout au niveau du texte. Je me demande donc quel est la tendance ? on utlise le device width / scale et on ré agence avec les media queries ou bien sans device width / scale et on laisse l'utilisateur zoomer ?

si vous pourriez me donner votre avis sur ce sujet ça serait cool :) Merci beaucoup, j'espère avoir été clair si c'est pas le cas n'hésitez pas a me le dire.
01/10/2013, 15h16
Muchos

D'une part, <meta name="viewport" /> ne sert à rien s'il n'y a aucune valeur.
D'autre part, la réponse est dans votre question :

Citation:

on utlise le device width / scale et on ré agence avec les media queries ou bien sans device width / scale et on laisse l'utilisateur zoomer ?

D'ailleurs, peut-on appeler "version mobile" un site qui nécessite un zoom?
03/10/2013, 22h31
userparis

bonjour Muchos et merci pour votre réponse.

D'après ce que je comprends vous dite qu'il est préférable d'utiliser scale width et device width. J'aimerai juste comprendre pourquoi, c'est lié à l'argument du zoom ou il y a une raison purement technique qui assure un bon fonctionnement du site version mobile sur tous les types de mobile ?

j'ai cru avoir lu dans un "tuto" que l'utilisation de scale et device width assure un rendu identique sur tous les mobiles. Pourquoi est ce que la solution inverse (sans scale et device width) n'assurerai pas le meme rendu ? techniquement quelque chose m'échappe :(

D'autre part je me pose la question car je me dis pourquoi se priver de 900 px dispo pour n'en utiliser que 300 et quelques?

D'ailleurs, sur mon mobile (i phone 4) je tombe assez souvent sur des sites qui a priori sont très ressemblant a la version ordinateur. Ce qui je suppose veut dire qu'il n'y a pas de scale et device width et pas de ré agencement.

J'espere que mes questions sont plus précises et que vous pourrez m'éclairer un peu :) merci.

EDIT : je voudrais ajouter quelque chose que je viens de remarquer, j'ai regarder le code source de certains site pour grandes enseigne et je ne vois pas de balise viewport. Pourtant après avoir consulter également ces sites sur mobile, ils sont ben ré agencer. Est-ce que dans ce cas, le ré agencement est gérer éventuellement avec les media queries ?

encore merci
03/10/2013, 23h15
Invité

Bonjour,
un article à lire :
=> Comprendre le méta tag viewport

:recherch: Pense à utiliser la recherche (tout en haut du forum, à droite)
04/10/2013, 09h23
userparis

Bonjour jreaux62 et merci d'intervenir sur mon sujet,

avant de poster, j'ai fait une recherche dans tous les forums sur les mot clé width et device width mais je n'ai rien trouver de concluant, peu être que je m'y suis mal pris pour la recherche :(

Je regarde le lien que tu fournis et reviens vers vous.

Merci

EDIT : OK, l'argument de devoir zoomer revient dans l'article ci-dessus.

Cette phrase de l'article a également retenu mon attention :

Citation:

La meilleure solution pour que votre site ait un « responsive design » est de définir comme largeur de « viewport » la largeur du matériel utilisé pour visualiser la page Web.

Je vais donc me lancer en suivant vos conseils et en définissant la taille du viewport, et utiliser les media queries. Juste pour conclure avant de tager résolu le topic, pourquoi (cf ma question dans la partie EDIT de mon deuxième post) après affichage du code source HTML de certains site le viewport n'est pas déclaré et pourtant le site est responsive sur consultation via mobile?

Merci
04/10/2013, 11h00
Invité

Les sites dont tu parles ne sont pas "responsive".
Les smartphone et autres tablettes sont concus pour afficher tous les sites (!),
en s'adaptant à la "plus grande largeur" du site.

Plus clairement : si le site fait 960px de large, il sera dézommé pour tenir dans l'écran.
04/10/2013, 13h14
userparis

Citation:

Envoyé par jreaux62

Plus clairement : si le site fait 960px de large, il sera dézommé pour tenir dans l'écran.

Je crois comprendre, enfin pas sûr : un site non responsive sera automatiquement dézommé pour tenir dans l'écran.

Et pour reprendre ton exemple, si le site non Responsive fait 960px de large et qu'il est affiché dans un smartphone qui fait (je dis une betise) max 700px de large, il faudra alors pour l'utilisateur faire glisser la page vers la droite pour voir ce qui s'y trouve ?

Merci
04/10/2013, 13h29
Invité

Citation:

un site non responsive sera automatiquement dézommé pour tenir dans l'écran.

Ca, c'est la bonne réponse.

Ta 2ème phrase contredit la 1ère. Ce qui suppose que tu n'as pas compris.

Si le smartphone fait 700px de large, le site tiendra entier dans 700px.

C'est exactement ce que tu as déjà observé !
Je ne vois pas où est le problème de compréhension ? :koi:

Prends ton smartphone, et essaie différents sites : tu verras !
04/10/2013, 14h01
rodolphebrd

Attention aux confusions car la taille du viewport d'un support mobile ne correspond ni à la résolution ni à la taille en "pixels CSS".

Prenons l'exemple du cas de Safari mobile dont le viewport est de 980 pixels (IPad et Iphone) un site dont la largeur sera supérieure à ce viewport dépassera avec un scroll horizontal.

C'est le comportement par défaut dans le cas où la balise méta viewport n'est pas renseignée.
04/10/2013, 19h55
userparis

Bonjour rodolphebrd et merci pour ces précisions, je crois que c'est ce que je voulais dire dans mon exemple du dessus mais désolé je me suis sans doute mal exprimé.

Quand je parlais de site non responsive, c'est quand la balise meta viewport n'est pas renseigné (ce que tu précises dans ton post) et que donc on utilise la taille du viewport 980 et non la taille en pixel CSS (320px je crois pour iPhone).

Et mon exemple de 700 pixel (je savais que j'avais dit une betise :( ) était un mauvais exemple. Donc pour safari mobile et meta viewport non renseigné pour un site de 1024 pixel, il faudra bien scroller horizontalement pour afficher les (1024-980) 44 px restant. Reste a savoir si les autres navigateurs mobiles réagissent pareil que Safari mobile ???

Mais la conclusion de cette interrogation et donc de mon topic c'est que justement il faut déclarer le meta viewport. merci :)
04/10/2013, 20h26
userparis

merci également a jreaux et muchos. :ccool:
04/10/2013, 20h28
Invité

Quelques lectures :
=> Cell Phone Screen Resolution, sorted by brand and model
=> Résolution, tablettes & smartphones
04/10/2013, 20h31
rodolphebrd

Citation:

Envoyé par userparis

Reste a savoir si les autres navigateurs mobiles réagissent pareil que Safari mobile ???

Non le viewport dépendra du navigateur...

Edit :

Citation:

Envoyé par userparis

Mais la conclusion de cette interrogation et donc de mon topic c'est que justement il faut déclarer le meta viewport. merci

Le viewport idéal, à mon sens, sans spécificités particulières, est le suivant :

Code:

<meta name="viewport" content="initial-scale=1.0">
05/10/2013, 02h59
Muchos

Citation:

Envoyé par rodolphebrd

Le viewport idéal, à mon sens, sans spécificités particulières, est le suivant :

Code:

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

Pourquoi cette déclaration par défaut? Merci d'avance!
05/10/2013, 22h19
rodolphebrd

Citation:

Envoyé par Muchos

Pourquoi cette déclaration par défaut?

Je n'irai pas jusqu'à dire qu'il s'agit d'une déclaration par défaut... ;)

Cependant j'ai vu assez d'exemples prônant, pour des projets responsives basiques, ce viewport.

Le viewport ne fait pas tout bien sur, les déclarations dans les média query composeront une partie de l'âme de la conception du projet...

Dans la mesure où il s'agit d'un démarrage il convient d'utiliser ce viewport à adapter bien sûr selon les besoins et comme je l'ai précisé, "sans spécificités particulières".

Cette syntaxe de meta viewport semble résoudre un bon nombre de problèmes d’affichage ou de redimensionnements non souhaités selon l’orientation.
La valeur de device-width posant des problèmes sur terminaux mobiles Apple.