Problème site responsive

Bonjour à tous,

voici mon problème en quelques mots; je viens de mettre mon site normalement responsive en ligne.
www.fanorosa.com
Je travaille sur imac et je vois le site parfaitement sur chrome et firefox mais dès que je passe sur PC la ça se gate.
Est ce que je dois ajouter des media screen pour chaque résolution d'écran ?

Autre chose, pouvez-vous me dire comment vous le voyez selon votre résolution, votre écran (ordi, tablette, mobile) et navigateurs :s
merci de votre aide

Hi Papy,
pourrais-tu décrire ce qui se passe et sous quel navigateur ?

Es-tu vraiment sûr que c'est le fait que ce soit un PC qui pose problème, et pas plutôt la résolution de l'écran avec lequel tu as consulté ton site avec ce PC?

Bonjour papychulo,

Je ne rencontre pas de problématique sur PC (Win 7), mais par contre sur mobile si.
Si vous souhaitez faire un site responsive sur mobile, il faut définir au minimum la meta viewport suivante dans votre <head/> :

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

À partir de cet ajout, on pourra se concentrer sur les autres comportements erratiques.

En l'attente de cet ajustement, bon code...

oui cela n'a rien avoir avec les pc, c les différentes résolutions d'écran qui posent problème.
J'ai testé sur imac résolution 1920x1080px et ça marche nickel (pareil sur tel samsung galaxy s).
Par contre iphone c pourri et quand la résolution diminue le menu cloche.

@guiwint : j'ai ajouté la meta sur ma homepage mais je comprends pas parce que je l'ai testé avec un samsung galaxy et c'était bon...

Merci beaucoup Guiwint en effet j'avais oublié la meta viewport
le site est maintenant nickel sur iphone 4 et samsung galaxy, j'ai testé via une application web les autres résolutions; ça a l'air de marcher sur tablettes mais ça déconne pour quelques mobiles comme motorola (240x320 et 176x220).
Il y a un problème avec le menu pour ces résolutions, et pour les résolutions entre 1600px à 1024px de large c'est pareil.

J'ai pensé ajouté des media screen pour chacune de ces résolutions... ou y a t'il une autre solution?

Bonsoir papychulo,

Pouvez-vous préciser le modèle de Motorola que vous utilisez pour les tests s'il vous plait ?

Bonjour guiwint,

j'ai testé sur le site http://quirktools.com/screenfly/ pour voir sur toutes les tablettes et mobiles. Les motorola concernés sont le RAZR V3M, le RAZR V8.
J'ai également des problèmes pour ces résolutions :
- 1024x600
- 1024x768
- 1280x600
- 1366x768
- 1440x800

Bonjour guiwint,

j'ai testé sur le site http://quirktools.com/screenfly/ pour voir sur toutes les tablettes et mobiles. Les motorola concernés sont le RAZR V3M, le RAZR V8.
J'ai également des problèmes pour ces résolutions :
- 1024x600
- 1024x768
- 1280x600
- 1366x768
- 1440x900
- 1600x900
- 1680x1050

et à partir de 1920px de large aucun problème.

Bonsoir papychulo,

Il me semble que votre approche est un peu confuse et vous demande beaucoup d'énergie .

Premier point :
Le site que vous présentez http://quirktools.com/screenfly/ n'est pas un simulateur de rendu de mobile : c'est toujours le navigateur de votre ordinateur qui réalise le rendu. Ce site vous donne juste une liste de résolutions disponibles.

Il est toujours plus concluant de tester directement sur les principaux appareils.

Deuxième point :
Vous n'êtes pas censé avoir une telle granularité dans vos tests des différentes résolutions : cela n'est pas utile. Vous devez vous concentrer sur les dimensions principales (ordinateur, tablette, mobile). En gros 1200px, 990px; 768px; 480px.

Votre interface est fluide. Si cela fonctionne à ces dimensions, il y a des chances que cela fonctionne dans les dimensions intermédiaires.

Et dernier point :
Pouvez-vous préciser les problèmes que vous rencontrez sur la liste des résolutions que vous avez présentées précédemment ?

En l'attente de vos retours, bon code...
Modifié par Guiwint (14 Mar 2014 - 18:07)

Bonjour Guiwint,

tout d'abord merci beaucoup pour vos retours...
Dommage pour screenfly le problème c'est que j'ai pas de tablettes je peux pas tester.
Sinon comme vous l'avez dit je me concentre sur les résolutions d'ordinateur (pour les mobiles ça marche sur samsung et iphone, pour l'instant ça me va).

Pour répondre à votre 3ème point, les problèmes que j'ai rencontré se trouvent dans mon menu, dans les résolutions 1024px et 1280px, il y a des irrégularités dans les fonds de mon menu (des hauteurs différentes de certains onglets de mon menu).

Je suis en train d'essayer de régler le problème je reviens vers vous si je trouve la solution

Bonjour à tous,
alors j'ai un peu codé pour essayer de régler mes petits problèmes d'adaptation à toutes les résolutions pour ordinateur. Pour éviter que la hauteur de certains de mes onglets du menu varient j'ai ajouté un max-height à ma balise <a> et ça a réglé ce problème.
Je l'ai testé sur mon Imac résolution 1920x1080px et sur Firefox, Chrome et Safari ça marche nickel.
J'ai testé ensuite sur mon PC résolution 1366x768px ça déconne pour IE 9, le dernier onglet du menu passe en dessous du 1er onglet

Si vous avez une idée je suis preneur svp prévenez si vous constatez un problème de chez vous.

Bonne journée à tous