Responsive - adapter zoom à la réso (width:100% ne fct pas)

EDIT : La première question a été résolue, j'en ai posé une deuxième un peu plus bas, la voici :

Quand chaque page de mon site s'affiche sur mobile, l'affichage n'est pas adapté à la fenêtre, je suis obligé de "dé-zoomer".

Comment puis-je faire pour que les pages s'affichent directement au zoom adapté ?

J'ai essayé

body { width:100%; }

sans succès. Merci pour votre aide!

// Ancien message //

Bonjour tout le monde,

tout d'abord merci pour les tutoriaux de très grande qualité ici, j'ai beaucoup appris. C'est ma prof de web qui nous a fait connaitre alsacréa, elle a bien fait!

Je vous expose mon problème : j'aimerais faire du responsive sur mon site, que sur mobile ou tablette le menu disparaisse, du classique quoi. Quand je suis sur ordi et que je réduis la taille de ma fenêtre ça marche impec, ce que je veux faire disparaitre disparait, ce que je veux faire apparaitre apparait.

Aufait le lien de mon site pour que vous puissiez voir: http://oliviermaria.fr/index.html

Sauf que quand je regarde sur mobile ou tablette j'ai le même affichage que sur ordi en plein écran....

Voici la ligne CSS que j'ai mis pour gérer le responsive :

@media screen and (max-width: 768px) {

Savez vous pourquoi cela ne fonctionne pas comme je le veux ?

Merci à vous! Olivier
Modifié par fr06 (08 Oct 2014 - 20:30)

Salut, peut être avec l'instruction:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

dans le header?

Salut Soldavox,

en effet, l'ajout de cette ligne de code est la solution. Je te remercie très sincèrement !

Tant mieux si ça t'as aidé, bon courage

Encore merci Soldavox.

Je ne veux pas ouvrir un autre sujet, je pose une deuxième question ici :

Quand chaque page de mon site s'affiche sur mobile, l'affichage n'est pas adapté à la fenêtre, je suis obligé de "dé-zoomer".

Comment puis-je faire pour que les pages s'affichent directement au zoom adapté ?

J'ai essayé

body { 	width:100%; }

sans succès.

bonjour,
Ne pas oublier de mettre le metaviewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Et si , c déja fait : enlever tous les width sur les conteneurs > div/nav/aside ( je parle par de body là ) , mettre max-width à la place pour avoir un contenu fluide.

Bonjour, merci pour ta réponse.

J'ai bien mis le metaviewport et je viens de changer les width par des max-width. Cela ne change rien à mon problème.

En cherchant, j'apprend que c'est l'initial-scale qui gère le zoom de base de chaque page, donc que je peut peut-être trouver la solution par là...

Y a t'il un moyen de dire au navigateur "initial-scale="zoom adapté à l'écran, largeur site=largeur ecran" ?

Salut,

Comme l'a si bien écrit Raphaël il y a bientôt trois ans (et c'est toujours d'actualité) : width: 100% est le mal.

salut ,
j'ai un souci ,mon site s'affiche au pied de page lorsqu'il charge. j'ai beau chercher je ne trouve pas d'ou vient le probleme.
besoin d'aide svp!