Discussion :

[lou_lou43]

Bonjour à tous,

Je suis en train de développer un site qui utilise le responsive design mais j'ai un problème lors de la détection de la taille d'écran.

J'ai dans mon code CSS un détection de la taille comme ça :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
@media only screen and (min-width: 55em) {
...
}

Et dans mon JS je le fais de cette manière :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
width = $(window).width() / parseFloat($("body").css("font-size"));
if (width < 55) {
...
}

Dans les deux cas, le changement de résolution fonctionne. Mais celui en CSS intervient lorsque la fenêtre est moins large que 55em.

Pour etre clair, ça rentre dans mon test en CSS seulement lorsque la variable JS "width" vaut 53.625.

Et bien sur, pour simplifier le tout, ce problème existe sur Firefox, IE mais pas Chrome.



Avez vous des idées pour résoudre ce problème?

Je vous remercie de vos réponses.


_____

LOULOU

[danielhagnoul]

Bonsoir

Conseil : pour les règles "@media" utilisez exclusivement les pixels.

La méthode jQuery width donne la taille en pixels.

[lou_lou43]

En fait, j'utilise le framework CSS Zurb Foundation, et c'est eux qui le mette en em d'origine

[arnogues]

Pour ton problème, je t'invite plutôt à suivre cette solution :
http://adactio.com/journal/5429/

Cette solution répond à ton problème, et l'idée est simple, tu récupères une valeur et il te suffit simplement de tester cette valeur.
Cette valeur sera simplement différente en fonction de ton mediaquery et de la taille de ton browser.

[lou_lou43]

Merci arnogues, cela à parfaitement résolu mon problème.