Pourquoi $(window).width() diffère-t-il des résultats de la requête multimédia et comment puis-je y remédier ?

Différence entre $(window).width() et les résultats de Media Query

Lors de l'utilisation de Twitter Bootstrap et jQuery pour manipuler des éléments en fonction de la fenêtre d'affichage width, vous pouvez rencontrer un écart entre les résultats renvoyés par $(window).width() et la largeur calculée dans votre requête multimédia CSS. Cette différence entrave l'application précise des comportements réactifs.

Le problème provient de l'exclusion potentielle de la largeur de la barre de défilement dans les calculs $(window).width(). Pour résoudre ce problème, une solution suggérée consiste à utiliser $(window).innerWidth(), qui inclut explicitement la barre de défilement.

Cependant, pour une approche globale qui correspond à votre requête multimédia, envisagez d'utiliser des méthodes alternatives qui sont cohérent avec les requêtes multimédias CSS.

Recommandé Solutions :

1. window.matchMedia():

   • Si la prise en charge du navigateur pour IE9 n'est pas un problème, utilisez window .matchMedia(), qui correspond entièrement aux requêtes multimédias CSS. A noter la prise en charge de son navigateur : https://caniuse.com/#feat=matchmedia

2. Modernizr:

   • Pour la compatibilité avec les anciens navigateurs, utilisez la méthode mq de Modernizr, qui prend en charge tous les navigateurs qui interprètent les requêtes multimédias dans CSS.

En incorporant ces solutions, vous pouvez vous assurer que les calculs de largeur de fenêtre dans votre code jQuery et les requêtes multimédias CSS s'alignent de manière transparente.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!