1485 sujets

Web Mobile et responsive web design

@media qui ne s'affiche pas bien sur mobile

Bonjour à tous,

Voilà, j'ai réalisé le site d'une chambre d'hôte et je voulais m'essayer au responsive design. J'ai donc suivi les infos que j'ai trouvé, par contre lorsque j'essaye sur mon ordi en redimensionnant la fenêtre du navigateur, il passe très bien en version mobile mais lorsque j'essaie sur mon iPhone, tout est tout petit, comme un site classique mais la version mobile. Je ne comprend pas d'ou ça vient?

Merci d'avance de votre aide.

La version d'essai est ici
salut,

essaie de mettre ça dans ton header,


<link rel="stylesheet" media="screen and (max-width: largeurmaxavantquetafeuilledestylesoitlu)" href="tafeuilledestyle.css" type="text/css"/>


dans ta feuille .css mets ça pour englober tout ton style : 

@media screen and (max-width: largeurmaxavantquetafeuilledestylesoitlupx) {

blabla...
}
Bonjour,

Merci pour ton aide.

Pour ce qui est du fichier css j'ai déjà mis ça. Il est nécessaire de le remettre dans le head?

J'avais cru comprendre qu il fallait soit mettre un lien dans le head pour la feuille mobile soit mettre ça dans le css mais pas les 2 !
dans le head tu dois le mettre si tu demande de lire une feuille de style avec cette règle, media="screen and (max-width: 800px)";

Fait un teste avec et sans pour voir si ton problème se résout.
Super. Ca avance ! Maintenant c'est trop grand , ça ne s'adapte pas à la taille de l'écran. Mais je vais trouver !

Merci
Modifié par Pooki (19 Mar 2014 - 19:19)
Non, j'ai réussi. C'était une erreur de code.
Par contre je ne comprend pas du tout comment on utilise ton site (celui que tu as mis en lien). Ou rentre t on l'adresse à tester?
Le problème, en fait, c'est que ca dépasse toujours un peu à droite. Ca ne se met jamais à la largeur de l'écran. J'ai beau changer les dimensions, ca ne va jamais.
il te suffit de faire glisser le bouton bleu dans ta barre de navigation.. ensuite tu vas sur ton site et tu clique sur l’icône resizer. après tu as plus qu'à tester. Smiley murf

Pour tes éléments qui dépasse mais leur des règles de largeur strict ou strict+% pour qu'il ne dépasse jamais de la largeur que tu souhaite.
Salut,

As-tu fixé le viewport ? (Ton lien démo ne fonctionne plus je ne peux pas regarder)

Parce qu'un navigateur mobile se définit une taille d'écran plus large que sa taille réelle pour faciliter l'affichage de site classique, mais pour les sites mobiles il faut définir une balise meta viewport dans le header de la page.
http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html
Modifié par nono47 (09 Apr 2014 - 11:43)
Sujet clos
Aller à