Pourquoi $(window).width() diffère-t-il des points d'arrêt de requête multimédia ?

Différence de largeur de fenêtre entre $(window).width() et Media Queries

Dans un projet utilisant Twitter Bootstrap et CSS personnalisé, des écarts surviennent entre les valeurs de largeur de fenêtre déterminé par $(window).width() et les requêtes multimédias. Malgré la définition d'un point d'arrêt de requête multimédia à 767 px, $(window).width() renvoie systématiquement une valeur inférieure de 16 px, ce qui entraîne un calcul CSS inattendu.

Causes et solutions

La principale raison de cet écart est l'exclusion de la largeur de la barre de défilement dans le calcul $(window).width(). Pour tenir compte de cela, il est recommandé d'utiliser $(window).innerWidth(), qui intègre la largeur de la barre de défilement. Cependant, cette approche peut ne pas convenir si un comportement cohérent avec le point d'arrêt de la requête multimédia est souhaité.

1. window.matchMedia() (navigateurs modernes uniquement)

Si vous pouvez prendre en charge les navigateurs modernes à l'exclusion d'IE9, window.matchMedia() fournit une solution transparente. Il s'aligne entièrement sur les requêtes multimédias CSS et garantit la cohérence entre JavaScript et CSS.

2. Méthode mq de Modernizr

Pour une prise en charge plus large du navigateur, la méthode mq de Modernizr est une option viable. Il émule le comportement de window.matchMedia() pour les navigateurs qui comprennent les requêtes multimédias CSS.

Implémentation

Pour implémenter la méthode mq de Modernizr :

if (Modernizr.mq('(max-width: 767px)')) {
    //...
} else {
    //...
}

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!