1485 sujets

Web Mobile et responsive web design

Bonjour,
j'ai refait mon site récemment en html5 et css3, et je voudrais l'adapter pour qu'il sois accessible sur les divers Smartphones.
après avoir regardé comment faire, je pense que le meilleur moyen est utilisé Media Query, dans la même feuille css du site.
j'ai donc ajouté dans ma feuille de style css

@media all and ( max-device-width : 480px )
 {
body {
width : auto ;
}
#bloc_page {
width : auto ;
}
 }

j'ai ajouter dans ma page html,
<meta name =" viewport " content =" width =device - width " />

mais voilà, mon site est je pense bien adapter aux Mobile, mais c'est écrit petit.
j'ai essayé une autre meta
<meta name="viewport" content="width=device-width, minimum-scale=1.0" />

Pour le coup rend la page parfaitement lisible, mais en même temps, cet agrandissement dépasse le cadre de l'écran du Smartphone. (iphone)

Auriez-vous quelques indications à m'apporter.
Merci d'avance
l'essaie se passe sur cette page.
http://www.scripophilie-corse.com/
j'avais regardé cet article, je pensais qu'il y avait simplement à redimensionner mon body et #bloc_page en width : auto; pour que cela fonctionne, donc, il faudrait faire la même chose à tous les éléments du site?.
Administrateur
Julien2B a écrit :
j'avais regardé cet article, je pensais qu'il y avait simplement à redimensionner mon body et #bloc_page en width : auto; pour que cela fonctionne, donc, il faudrait faire la même chose à tous les éléments du site?.


Oui : tous les éléments plus grands que la largeur du device-width (donc a priori 320px+) sont potentiellement problématiques.

Il faut donc revoir toutes les propriétés width, min-width, padding, margin, etc.
Modifié par Raphael (31 Mar 2012 - 20:46)
ah! ok très bien, je comprend mieux, je te remercie Raphael.
je pensais que le fait de réduire en auto body et bloc_page, tous ce qui est à interieur s'adapterait automatiquement également, car tous mes width son en pourcentage, mais en faite non, car il reste fait pour grand écran, tant que je ne les est pas inclue dans le media query. Smiley smile