Pourquoi les requêtes $(window).width() et CSS Media signalent-elles différentes largeurs de fenêtre ?

Largeur de fenêtre mesurée de manière incohérente entre $(window).width() et les requêtes multimédias CSS

Lors de l'utilisation de $(window).width de jQuery () pour déterminer la largeur de la fenêtre d'affichage, vous pouvez rencontrer des écarts avec la largeur calculée par les requêtes multimédias CSS. Cette différence peut être attribuée à divers facteurs, notamment la largeur de la barre de défilement du navigateur.

Pour résoudre ce problème, pensez à utiliser window.matchMedia(). Cette méthode fournit des calculs de largeur précis et cohérents avec les requêtes multimédias CSS. Il est pris en charge par tous les navigateurs modernes et peut être implémenté comme suit :

function checkPosition() {
    if (window.matchMedia('(max-width: 767px)').matches) {
        //...
    } else {
        //...
    }
}

Solution alternative utilisant Modernizr :

Si la compatibilité du navigateur pose un problème, vous pouvez utiliser la méthode mq fournie par Modernizr. Il prend en charge tous les navigateurs qui comprennent les requêtes multimédias.

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

Notez que l'utilisation de $(window).innerWidth() pour calculer la largeur de la fenêtre d'affichage, tout en tenant compte de la barre de défilement, n'est pas toujours la solution optimale car les largeurs des barres de défilement peuvent varier selon les navigateurs.

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!