1476 sujets

Web Mobile et responsive web design

Bonjour,
mon site comporte quelques bugs pas méchants, on fera avec...
cependant il ne passe pas le test de compatibilité mobile, important pour un meilleur référencement seo.
voici l'adresse
http://www.champ-magnetique-pulse.fr/
Tous les pages du site sont concernées et l'erreur est toujours la même :
Non adaptée aux mobiles car le Contenu plus large que l'écran ....
J'ai essayé, essayé, et encore essayé en mettant
<meta name="viewport" content="width=device-width,initial-scale=1">
mais rien n'y fait..
Avez-vous une astuce simple, évitant de recréer un site pour mobile et un site pour pc ?
Merci de votre aide.
Fanny
Modifié par Felipe (10 Apr 2015 - 16:49)
Modérateur
Bonjour,


Bah typiquement éviter de mettre des width fixée au pixel près.
#centre {
    width: 1000px;
}

Peut importe ta balise meta ton site fera toujours 1000px de large, donc ça déborde d'un mobile.
Tu peux le remplacer par un truc du genre :
#centre {
    width: 100%; /* Prend toute la largeur de l'écran, pas moins, mais pas plus */
    max-width: 1000px; /* mais s’arrête à 1000px max */
}

Et sinon en optionnel éviter de tout placer en float ça évitera plein de soucis et tu gardera un flux et un positionnement cohérent :
#centre {
    float: left; /* <- là */
    text-align: justify;
    width: 1000px;
}
Modérateur
Celui que j'ai pris pour exemple
#centre {
    float: left;
    text-align: justify;
    width: 1000px;
}

viens du fichier structure.css

Mais il y a aussi d'autres trucs du même genre comme des images de 1000px de large.
par exemple : http://www.champ-magnetique-pulse.fr/images/adresseover.jpg

La compatibilité mobile c'est pas compliqué mais ça se travaille un peu quand même ! Smiley smile
On ne peut pas faire rentrer des pastèque dans un citron comme dirait l'autre.

Renseigne toi un peu sur le design Fluide http://www.alsacreations.com/tuto/lire/547-faire-un-site-pour-toutes-les-resolutions.html ca devrait t'ouvrir des perspectives
Administrateur
Bonjour,

l'astuce en lien dans un mes précédents messages pourra t'aider, notamment img { max-width: 100% }

_laurent > Mieux vaut préférer width: auto; à width: 100%; Smiley cligne (sauf quand ça fonctionne pas).

edit: j'ai édité le titre pour que ça ait un rapport avec le sujet
Modifié par Felipe (10 Apr 2015 - 16:49)
Modérateur
Felipe a écrit :
_laurent &gt; Mieux vaut préférer width: auto; à width: 100%; Smiley cligne (sauf quand ça fonctionne pas).
yop je suis tout a fait de ton avis (il vaut meme mieux ne pas mettre de width du totu du coup, c'est son comportement par défaut non ?). par contre avec la cascade de float et les images qui dépassent j'ai pensé qu'un 100% ne serait pas de trop Smiley lol

Felipe a écrit :
edit: j'ai édité le titre pour que ça ait un rapport avec le sujet
+1, en plus c'est pas compliqué Smiley biggrin
YYEEEEEESSSSSSSSSSSSSSS !

ça marche, j'ai juste changé deux images par pages , et ça fonctionne


maintenant ça marque au test : Parfait. Cette page est adaptée aux mobiles.
et pour toutes les pages

aprés les float ????
je sais pas ce qu'il faut faire
Le site, s'ajuste bien a vos écrans ?
qu'est ce que t'as fait exactement fanny64? en fait j'ai le même problem et ça marche pas pour moi.