Unités fluides (%) qui changent selon la taille de la page

Bonjour.

Alors voila sa fait un moment que je m’évertue a développer un site pour mobile, j'ai lu pas mal ce site, mais le problème c'est quoi moi je n'uilise pas de meta viewport.

Je me suis donc dit que j'allais regler la taille des elements en unités fluides pour que ça s'adapte aux différentes résolutions de smartphones (avec un body { width:100%; ou width:device-width;} par exemple)

Le soucis c'est mes éléments dont la hauteur est définie en pourcentage changent de taille en fonction de la hauteur de la page, donc plus j'ai de contenu, plus la page est grande et plus les éléments sont grands.

Alors que moi je voudrais qu'ils aient une taille fixe pour chaque pages

Je suis sur qu'il y'a une solution ou quelque chose que j'ai mal fait quelque part.

Sinon j'avais eu une autre idée, c'est celle de mettre les hauteurs d'images (le header, plus les boutons) en em, et ça reglait le problème; mais ce qui me gène avec cette solution, c'est que si on change la taille de la police, forcement, tout se détraque, et il me semble que sa poserait des problèmes de compatibilités inter navigateurs....

Salut,

G3NE a écrit :
mais le problème c'est quoi moi je n'uilise pas de meta viewport.

Et pourquoi ne l'utilises-tu pas ?

Victor BRITO a écrit :
Salut,

Et pourquoi ne l'utilises-tu pas ?

j'ai commencer a développer sans le connaitre, et j'ai jamais compris a quoi il servait

G3NE a écrit :
j'ai commencer a développer sans le connaitre, et j'ai jamais compris a quoi il servait

Quelques éléments de réponse dans cette astuce.

a écrit :
Pour être efficient au maximum, il convient de définir au sein du code HTML un élément méta Viewport de type

<meta name="viewport" content="width=device-width" />

Cette étape a pour principal avantage d'éviter le redimensionnement automatique de la mise en page, qui rend les contenus trop petits, de fixer la largeur du mobile et de pouvoir s'y adapter par la suite. Cette instruction court-circuite le viewport par défaut, souvent bien trop large, et fournit une base commune plus proche de la réalité.

Tu as également une autre ressource (en anglais) à ce sujet, sur le site d'Opera.

En gros, est-ce que ça n'est pas équivalent à
body
{
width: max-device-width;
}

j'ai essayer <meta name="viewport" content="width=device-width, height=device-height"/> mais sa n'a absolument rien changer

G3NE a écrit :
En gros, est-ce que ça n'est pas équivalent à
body
{
width: max-device-width;
}

Attention ! max-device-width n'est pas une valeur de la propriété CSS width. La méta viewport n'a rien à voir avec les CSS.

Quant à la méta viewport, le paramètre height est, à mon avis, inutile. Cela dit, paramétrer le viewport ne suffit pas : il faut également adapter les règles CSS au moyen des media queries.

Pour le reste, aurais-tu un lien vers la page en question ? Ce sera plus pratique.
Modifié par Victor BRITO (19 Oct 2011 - 16:10)

Enfait, le code avait du mal compiler hier soir (ou autre soucis), parce que la le view port avec width=device-width m'écrase complétement ma page sur un tiert de l'écran xD,

Je pense en fait que j'ai coder avec de très gros éléments pour que ça soit directement visible par le smartphone sans avoir a zoomer, alors qu'avec un meta-viewport, je n'aurais pas eu besoin d’élément très gros.

Et désolé mais mon boss ne voudra pas que je montre la page =( (je sais c'est null, mais bon, je ne suis que stagiaire ^^) mais voila le code du body :

body
{
width: 100%;

margin: auto; /* Pour centrer notre page */
margin-top: 2px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 2px; /* Idem pour le bas du navigateur */
margin-left:2%;
background-color: red;
font-size: 70%;

/* background-image: url(ressources/img/trame_de_fond.png);
background-attachment: fixed;
background-repeat: repeat x; */
}

et pour le reste, rien de sorcier, j'utilise des %pour les largeurs, et des em pour les hauteur d'images ( il y'a quelque marges que j'ai laisser en px pour l'instant, des marges de 2px et ect, je ne pense pas que ça soit très problématique pour l'inter-opérabilité).

Merci encore du temps que tu m'accorde.