1485 sujets

Web Mobile et responsive web design

Problème de Viewport

Bonjour à vous,

Je suis en train de réaliser un site mobile, et voici mon problème.

Le design fait 320px de large. Ce que je souhaite, c'est que le design soit adapté à la largeur de l'écran en zoomant automatique. En gros, le site prend toujours la largeur, même si cela implique que les images soient dégueux (ça après, c'est une autre histoire...). Je souhaite que ça zoom et s'adapte automatiquement quand on tourne le mobile également.

J'ai donc un body qui fait 320px, et j'ai placé la balise <meta> suivante dans le <head> de ma page :
<meta name="viewport" content="width=device-width, user-scalable=no">


Sous iOS, aucun souci, quand je tourne le téléphone, il s'adapte bien.
Sous Android par contre, quand je mets le téléphone en mode paysage, il reste à 320px, collé à gauche de l'écran, au lieu de zoomer...

N'étant pas encore un grand expert du mobile, j'imagine que je n'ai peut-être pas compris ce qu'il fallait faire... Donc je viens vous demander votre aide pour m'expliquer ce qui ne va pas ! Smiley smile

Merci à vous d'avance !
Les éléments (comme ton body) qui ont une largeur en pixels doivent avoir une largeur auto pour qu'ils prennent toute la largeur de l'écran.

Pour les images tu fais ceci :

img {max-width: 100%;}


P.S. : le «user-scalable=no» tu peux l'enlever de ta meta wiewport, ça empêche les personnes ayant des problèmes de vue de zoomer le texte.
Salut,

Parmi les paramètres utilisables pour régler le viewport, il y a initial-scale et maximum-scale ; cela dit, il est préférable de laisser à l'utilisateur la possibilité de zoomer par lui-même (ce qui n'est pas le cas quand on règle le paramètre user-scalable à no). Pour le reste, il est plus judicieux de ne pas fixer la largeur des conteneurs « hors tout » (pour éviter que ça ne colle à gauche, comme tu dis).

Édition : grillé par Patidou.
Modifié par Victor BRITO (09 Nov 2011 - 12:07)
Patidou a écrit :
Les éléments (comme ton body) qui ont une largeur en pixels doivent avoir une largeur auto pour qu'ils prennent toute la largeur de l'écran.

Pour les images tu fais ceci :

img {max-width: 100%;}


P.S. : le «user-scalable=no» tu peux l'enlever de ta meta wiewport, ça empêche les personnes ayant des problèmes de vue de zoomer le texte.


Victor BRITO a écrit :
Salut,

Parmi les paramètres utilisables pour régler le viewport, il y a initial-scale et maximum-scale ; cela dit, il est préférable de laisser à l'utilisateur la possibilité de zoomer par lui-même (ce qui n'est pas le cas quand on règle le paramètre user-scalable à no). Pour le reste, il est plus judicieux de ne pas fixer la largeur des conteneurs « hors tout » (pour éviter que ça ne colle à gauche, comme tu dis).

Édition : grillé par Patidou.



Si je mets le body avec une largeur auto, il faut que je fasse TOUT le design avec des tailles automatiques (polices, tailles des blocs, etc...), mais pour certaines raisons je ne peux pas. Je suis entièrement d'accord avec vous concernant la taille du site et également le zoom, mais quand le client veut un truc en particulier, je le fais. Même si il me demande du IE6, on connait tous la chanson...

J'ai également essayé de mettre initial-scale et maximum-scale, mais ça n'a rien changé (en valeur = 1.0)


Il n'est donc pas possible de faire un simple zoom qui prenne toute la largeur ? Il n'y a qu'iOS qui le fait nativement ?
Sujet clos
Aller à