[CSS 3] Largeur page sur mobile (IPhone, HTC, etc.) [Résolu]

[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 :

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.

[charly-b]

Bonjour .

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

[Sergejack]

Code :

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?

[charly-b]

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.

[charly-b]

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]

Envoyé par Sergejack

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 :

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

[Sergejack]

C'est ce que j'avais au début.
Je l'ai remis, juste pour re-re-re-vérifier si je constatais alors la moindre évolution.
Ben non, aucune. (Essayé via HTC).

[Macmillenium]

Je viens d'essayer avec deux navigateurs mobiles webkit, la page s'affiche correctement.
C'est quoi ton navigateur?

[Patrice.H]

Envoyé par Sergejack

Code :

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 :

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

[Sergejack]

Envoyé par Macmillenium

Je viens d'essayer avec deux navigateurs mobiles webkit, la page s'affiche correctement.
C'est quoi ton navigateur?

-En pleine largeur sans le moindre bord vert sur les côtés ?
-Safari entre autres.

Je sais pas si la nuance entre ce que j'obtiens et ce que je souhaite est clair alors je vais mettre une image du résultat que j'aimerais obtenir dès ouverture de la page sur IPhone.

[Sergejack]

Je n'arrive toujours pas à un résultat correct.

Est-ce que quelqu'un pourrait faire ou aurait un exemple d'une page web d'une largeur de 230px et qui s'afficherait en pleine largeur sur mobile ?
Si au moins j'ai un exemple fonctionnel ça me permettrait de trouver ce qu'il convient de changer.

Merci.