Les requêtes média CSS et la largeur de la fenêtre JavaScript ne correspondent pas.

Question

Pour un modèle réactif, j'ai une requête média dans mon CSS :

@media screen and (max-width: 960px) {
 body{
 /*  something */
 background:red;
 }
}

Et, j'ai fait une fonction jQuery sur le redimensionnement à la largeur du journal :

$(window).resize(function() {
 console.log($(window).width());
 console.log($(document).width()); /* same result */
 /* something for my js navigation */
}

Et il y a une différence entre la détection CSS et le résultat JS, j'ai cette méta :

<meta content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" name="viewport"/> 

Je suppose que c'est dû à la barre de défilement (15 px). Comment puis-je faire mieux ?

Answer 1

La manière simple et fiable de le faire est d'utiliser Requêtes médias .

Pour démontrer, je veux vérifier si la largeur de l'écran est supérieure ou égale à 992px (le grand appareil de Bootstrap) :

function isLargeDevice() {
    if (window.matchMedia("(min-width: 992px)").matches) {
        return true;
    } 
    return false;
}

Si vous utilisez Modernizer alors c'est un peu plus facile, ici je veux vérifier si l'écran est plus petit que le grand écran de Bootstrap (992px)

function isSmallerThanLargeScreen() {
    if (Modernizr.mq('(max-width: 991px)')) {
        return true;
    }
    return false;
}

Answer 2

D'après mon expérience, la largeur de la requête média suit celle de document.body.clientWidth. À cause d'une barre de défilement verticale qui va et vient, le fait de vérifier document, window ou viewport().width pouvait entraîner une exécution tardive de mon Javascript - après le changement de règle de la requête média, selon la hauteur de la fenêtre.

La vérification de document.body.clientWidth a permis à mon code script de s'exécuter de manière cohérente au moment où la règle de requête média prenait effet.

@media (min-width:873px) {
     //certaines règles
}
...

si ( document.body.clientWidth >= 873) {
    // un peu de code
}

Le code d'Andy Langton m'a mis sur la piste - merci !

Answer 3

Css media query est égal à window.innerWidth. Les requêtes média Css calculent également la barre de défilement.