11484 sujets

JavaScript, DOM et API Web HTML5

Css et Jquery ne sont pas d'accord sur la largeur de la fenêtre

Bonjour à tous!

je viens de déceler un bug que je ne comprends pas:

pour les besoins d'un site, je détecte la taille de l'écran par JQuery pour obtenir deux comportements différents d'une part, et par Css (média queries) pour obtenir un affichage différent d'autre part.

ce qui donne ceci:

window.$Global1 =  { WindowWidth : $(window).width(), }
if($Global1.WindowWidth>=600){ window.$Global4 = {device : 'desktop',} }	  
if($Global1.WindowWidth<600){ window.$Global4 = {device : 'mobile',} }

et cela:

@media screen and (max-width: 599px) { .bloc {propriété:rouge;}}
@media screen and (min-width: 599px) { .bloc {propriété:bleu;}}


bon, tout est bien, sauf que je me rends compte que à priori, la bascule entre les deux valeurs de la variable device ne se fait pas à la même taille de fenêtre que la bascule entre les deux valeurs de la propriété css.

si je redimensionne ma fenêtre, avant 581px, c'est ok partout, entre 582 et 600px jquery considère une valeur "mobile" mais css affiche un "bleu", au delà de 600px, c'est ok partout.

(les valeurs en px me sont données par un alert($Global1.WindowWidth);, et confirmées par firebug en vérifiant la largeur d'une image de largeur 100%)

je constate le problème sur FF, Chrome, IE9...

est ce que ça viendrait de la barre de scroll qui est comptée dans Css mais pas dans Jquery?

merci de vos retours Smiley smile
Modifié par Claire39 (28 May 2014 - 20:25)
à priori, j'avais raison!

c'est bien Css qui détecte la largeur de la fenêtre scrollbar comprise, alors que Jquery détecte la largeur de la fenêtre sans scrollbar.

puisque la manipulation de la largeur de la fenêtre avec la balise meta viewport ne permet pas de comprendre la largeur d'affichage "utile" de la fenêtre, c'est donc par Jquery que je vais passer.

et pour cela, j'ai trouver un petit bout de script ici :
http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php


function scrollbarWidth() {
    var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>');
    // Append our div, do our calculation and then remove it
    $('body').append(div);
    var w1 = $('div', div).innerWidth();
    div.css('overflow-y', 'scroll');
    var w2 = $('div', div).innerWidth();
    $(div).remove();
    return (w1 - w2);
}


..que j'ai réadapté à mon propre script.

pour détecter la largeur de fenêtre avec Jquery, j'additionne donc la largeur de la scrollbar à la largeur de la fenêtre, et j'obtiens le même résultat qu'avec les media queries de css... et donc mon super comportement de la mort avec l'habillage qui va bien!
ps: vérification navigateurs desktop:
Firefox ok,
Safari ok,
IE9 ok,
Chrome Smiley ohwell
Opera Smiley ohwell

ces deux récalcitrants me donnent bien la bonne valeur de largeur de fenêtre + scrollbar, mais à priori, j'ai toujours un décalage entre le point de bascule JQuery et Css...

quelqu'un saurait m'aider ou me mettre sur la bonne piste?
Modifié par Claire39 (28 May 2014 - 20:29)
Bonsoir,

Moi aussi je rencontre régulièrement des problèmes de différence de comportement entre les navigateurs lorsque je veux faire des choses un peu pointus en javascript... je pense que l'on peut malheureusement rien y faire, ils n'ont pas tous les même méthodes de calculs et parfois on peut avoir des différences au niveau des pixels, il faut s'adapter.

Par contre dans ton cas je ne comprend pas pourquoi tu n'utilise pas tous simplement des mediasqueries, qu'est ce que tu veux faire au juste ??
Bonjour,

je détecte la largeur d'écran en CSS pour afficher un visuel différent en fonction d'un éran de type smartphone, tablette, desktop... c'est un peu primaire, mais c'est déjà une base.

je détecte la largeur d'écran en Javascript pour proposer certains comportements, effets visuels, chargement d'une image light ou lourde... en fonction également de la taille de l'écran.

Le problème réside dans le fait qu'à certains moments, je fais intervenir une détection CSS et Javascript pour obtenir l'ensemble des choix, donc si les deux ne détectent pas la même taille d'écran, ça va être galère... Smiley sweatdrop
Bonjour,

je détecte la largeur d'écran en CSS pour afficher un visuel différent en fonction d'un éran de type smartphone, tablette, desktop... c'est un peu primaire, mais c'est déjà une base.

je détecte la largeur d'écran en Javascript pour proposer certains comportements, effets visuels, chargement d'une image light ou lourde... en fonction également de la taille de l'écran.

Le problème réside dans le fait qu'à certains moments, je fais intervenir une détection CSS et Javascript pour obtenir l'ensemble des choix, donc si les deux ne détectent pas la même taille d'écran, ça va être galère... Smiley sweatdrop
... plutôt que de chercher à calculer la largeur en pixels de la scrollbar du navigateur, ce qui me paraissait assez intéressant au départ mais un peu lourd comme processus, j'ai trouvé une propriété de window qui me donne le même résultat sur tout navigateur (de bureau), et qui dit "pareil" que Css :

window.innerWidth()

à priori, avec ceci, j'obtiens la largeur de la fenêtre de navigateur, scrollbar comprise, soit ce que détecte Css avec les media queries.

à tester sur navigateurs mobiles, aniennes versions des navigateurs desktop... Smiley cligne
... suite de mes aventures?

en détectant la largeur de la fenêtre avec window.innerWidth(), j'obtiens de bons résultats avec les différents navigateurs desktop, mais je tombe en plein dans les différences entre définition de l'écran et dimension du viewport pour les devices mobiles et tablettes (parfaitement décrit d'ailleurs sur cet article: http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html)

la solution à mon problème se trouve dans l'article de Raphael :

La surface en "pixels CSS"
Egalement appelée device-width (device-height) ou screen.width (screen.height)

ce n'est pas la taille de la fenêtre qui m'importe, mais la taille de l'écran du device, pour notamment déterminer si celui ci entre dans ma catégorie (arbitraire et toute personnelle, j'assume) "mobile", ou "tablette", ou "desktop"

donc pourquoi chercher midi à 14h?

Css : @media screen and (max-width: 649px)
Jquery : WindowWidth = screen.width;

pour moi, c'est bon et vérifié sur quelques devices + navigateurs desktop, sauf si l'un d'entre vous a des précisions ou un "attention, tu réfléchis pas dans le bon sens!" à signaler ici.

bonne fin de journée Smiley smile
Salut,

Petite idée comme ça sinon qui n'a rien à voir avec la piste sur laquelle tu es parti.
Au lieu de détecter la largeur d'écran en jquery, pourquoi ne pas détecter un changement de propriété .css ?

Je m'explique, dans ton media queries, tu as des propriétés .css qui changent (je ne sais pas, au pif, un div avec un display:none ou block, etc ...).
Si tu détecte le changement de la propriété, ça te fera le même effet que la détection de ta largeur d'écran, sauf que tu seras sûr que la bascule s'effectuera au même moment que ta bascule media queries.

Manu
en voilà une idée qu'elle est bonne!
ça pourrait être moins ressourcivore comme procédé!
merci ManuB28, je vais creuser de ce côté aussi Smiley smile
Sujet clos
Aller à