Discussion :

[Sergejack]

Bonjour.

J'ai fait un site pour une largeur de 230px et j'aimerais que sur smartphones, l'affichage se fasse sur la largeur maximale de la page (full zoom si vous voulez).
J'ai pas mal cherché et j'ai découvert l'emploie de meta+viewport.
Mais je n'arrive pas à mes fins.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<meta name="viewport" content="width=230, user-scalable=no">

Vous pouvez tester (en développement donc sensiblement changeant) à cette adresse http://www.mygolf.be/test/Test.htm.

J'aimerais obtenir ce résultat sur mobile (pleine largeur donc) :


Merci.

[Invité]

Bonjour .

Ben ... en mettant width: 100% pour #mainCanevas, non ?

[Sergejack]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
#mainCanevas {
			width: 230px;
			margin: auto;
			padding: 20px 0px 2px 0px;
			position: relative;
			text-align: center;
		}

#mainCanevas a déjà une largeur de 230px, ça devrait donc être bon (c'est d'ailleurs le point de départ de ce design en 230px), que je sache?

[Invité]

J'ai dû mal comprendre. Tu veux que ton site s'affiche sur toute la largeur de l'écran du téléphone, c'est bien ça ?

[Sergejack]

Oui c'est ça.
Mais le design est pensé et établit en 230px * xxx px donc je ne veux/peux pas indiqué que la taille devrait être 100% d'un écran sinon ça ne ressemblera plus à ce à quoi ça doit ressembler.

[Invité]

C'est paradoxal: tu ne peux pas définir une largeur en pixel et lui demander de s'adapter à l'écran .

Tu devrais faire 2 styles, un pour pc, en px, l'autre pour les mobiles, en 100%.
Tu peux te servir d'une lib js comme modernizr pour détecter si l'utilisateur est sur un smartphone .

[Macmillenium]

Mais le design est pensé et établit en 230px * xxx px donc je ne veux/peux pas indiqué que la taille devrait être 100% d'un écran sinon ça ne ressemblera plus à ce à quoi ça doit ressembler.

Les smartphones redimensionnent les éléments de manière proportionnelle à la taille de leurs viewports.
Essaye donc ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<meta name="viewport" content="width=device-width, maximum-scale=1" />

[Patrice.H]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<meta name="viewport" content="width=230, user-scalable=no">

Tu utilises le bon outil mais pas de la bonne façon. C'est bien dans les balises <meta> que tu va trouver ton bonheur mais pas en définissant le viewport (qui n'est de toute façon pas pris en compte par tous les navigateurs mobiles).

Je seconde charly-b pour une version "fixe" pour PC et une version "100%" pour mobiles. Par contre, aucun besoin de jQuery ou autre pour détecter le mobile, les media queries sont faites pour ça.

Pour ma part j'utilise

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<meta name="viewport" content="width=device-width" /> 
 
	<link rel="stylesheet" media="handheld" href="m.style.css" type="text/css" /> 
	<link rel="stylesheet" media="print" href="m.style.css" type="text/css" /> 
	<link rel="stylesheet" media="all and (min-width: 650px)" href="style.css" type="text/css" /> 
	<link rel="stylesheet" media="all and (min-device-width: 650px)" href="style.css" type="text/css" /> 
	<link rel="stylesheet" media="all and (max-width: 650px)" href="m.style.css" type="text/css" /> 
	<link rel="stylesheet" media="all and (max-device-width: 650px)" href="m.style.css" type="text/css" />

Avec style.css définissant la version PC, m.style.css la version pour mobile

C'est redondant mais cela a le mérite de marcher avec tous les navigateurs et tous les mobiles que j'ai pu tester. (A condition qu'il soit moins large que 650px).


EDIT: tu peux voir le code ci dessus fonctionner sur mon site perso (ICI ou en scannant mon avatar avec un smartphone). Pour les media queries il y a de très bon tutos sur la toile.

Cordialement,
P