1485 sujets

Web Mobile et responsive web design

Bonjour à tous,
Je suis novice et je m'exerce au responsive design, vous pouvez voir un exemple sur mon site.
A priori, pas trop d’erreurs, j'obtiens bien un affichage propre à chaque médias sreen que j'ai paramétré dans mon css.

@media only screen and (min-width: 481px) {
....
}
@media only screen and (min-width: 769px) {
....
}
@media only screen and (max-width:480px){
....
}


Ma question est donc la suivante:
Comment puis-je basculer manuellement d'un affichage à l'autre en cliquant sur une image dans mon bas de page?
http://referencement-refereceur.fr/images/mobil.png http://referencement-refereceur.fr/images/tablette.png http://referencement-refereceur.fr/images/desktop.png
Quelle fonction PHP ou CSS dois-je utiliser pour forcer l'affichage?

J'espère avoir été suffisamment claire dans ma question et mes explications Smiley sweatdrop Merci d'avance!
Modifié par DoudiX (04 Jun 2015 - 11:50)
Dans la mesure où il s'agit d'une adaptation à la taille réelle de la fenêtre (et pas de l'écran) tu dois pouvoir jouer sur la taille de la fenêtre par la fonction JavaScript window.resize()

Personnellement je fais ça à la souris en modifiant la taille de la fenêtre de FireFox ou en utilisant le zoom par Ctrl-roulette de souris.
Noter que ce n'est pas faisable sur une tablette, car les fenêtres ne sont pas redimensionnables.

Mais je ne vois pas comment faire ça en CSS ou PHP.
Modifié par PapyJP (04 Jun 2015 - 20:07)
sur Firefox, ctrl+shift+m, on accède ainsi à une simulation sans avoir à redimensionner la fenêtre du navigateur

Smiley cligne
juliesunset a écrit :
sur Firefox, ctrl+shift+m, on accède ainsi à une simulation sans avoir à redimensionner la fenêtre du navigateur

Smiley cligne

Whaouh!! c'est génial, je ne savais pas.
Merci Julie, ça va me servir. Smiley biggrin