Pourquoi la fenêtre.largeur inférieure à celle définie dans les requêtes médias

C'est ce qui a fonctionné pour moi: les requêtes de média CSS et JavaScript largeur de la fenêtre ne correspond pas à .

au lieu d'utiliser $(window).width(); qui inclut les barres de défilement obtenir la largeur intérieure comme ceci:

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

var vpWidth = viewport().width; // This should match your media query

c'est à cause du scrollbar's

la solution la plus correcte que j'ai trouvée est d'utiliser les requêtes Médias pour passer la taille réelle de la fenêtre À Javascript. Vous devez suivre ces étapes:

• Ajouter un élément caché à votre page,
• utiliser des requêtes Médias pour modifier la max-width propriété de cet élément,
• Lire max-width propriété de l'élément à l'aide de Javascript.

par exemple, ajoutez l'élément suivant à votre page:

<div id="currentMedia"></div>

puis écrivez les règles CSS suivantes:

#currentMedia {
    display: none;
}

@media (max-width: 720px) {
    // Make arrows in the carousel disappear...

    #currentMedia {
        max-width: 720px;
    }
}

alors, du côté Javascript, vous pouvez écrire:

if (parseInt(jQuery("#currentMedia").css("max-width"), 10) <= 720) {
    // Code HERE..
}

et il sera précis quelle que soit la taille de la barre de défilement, puisque la valeur provient de la même requête multimédia qui déclenche la disparition du Carrousel.

j'ai testé cette solution sur tous les principaux navigateurs récents, et il donne des résultats corrects.

vous trouverez le grand résumé de ce que les propriétés sont prises en charge sur ce que les navigateurs sur cette page sur quirksmode.org .

votre meilleur pari est probablement de saisir un élément dans la page (en utilisant le document.organisme, s'il est appuyé, ou document.getElementById ou n'importe quoi d'autre), parcourir sa chaîne offsetParent pour trouver l'élément le plus élevé, puis examiner cet élément de clientWidth et clientHeight.

innerWidth documentation

la méthode .innerWidth() ne s'applique pas aux objets window et document ; pour ces objets, utilisez plutôt .width() .

similaire à la réponse de @Snugugugugs mais qui a fonctionné mieux pour mon cas d'utilisation:

CSS (notez que j'utilise moins de so @tabletMin et @desktopMin traduire pour les variables de point de rupture que j'ai mis ailleurs:

    #cssWidth {
        display:none;
        content:'mobile';
    }

    /* Responsive styles (Tablet) */
    @media (min-width: @tabletMin) {
        #cssWidth {
            content:'tablet';
        }
        /* Other tablet CSS... */
    }
    /* Responsive styles (Desktop) */
    @media (min-width: @desktopMin) {
        #cssWidth {
            content:'desktop';
        }
        /* Other Desktop CSS... */
    }

puis en JS:

    getView = function() {
        // If #cssWidth element does not exist, create it and prepend it do body
        if ($('#cssWidth').length === 0) {
            $('body').prepend($(document.createElement('div')).attr('id', 'cssWidth'));
        }
        // Return the value of the elements 'content' property
        return $('#cssWidth').css('content');
    };

la fonction getView() retournera alors la chaîne de caractères 'mobile', 'tablet' ou 'desktop' dépendant de la largeur du media queries see.

cela pourrait être étendu pour s'adapter à plus de largeurs de viewport, il suffit d'ajouter plus de règles dans le CSS avec d'autres valeurs.

la réponse de @Snugug donne une très bonne explication quant à la raison pour laquelle cela se produit, et @TusharGupta a une bonne solution aussi bien que des références à la largeur détectée par mediaquery en javascript. La solution ci-dessous va dans l'autre sens en utilisant la largeur détectée par javascript pour déclencher des changements de mise en page.

dans le cas où vous avez besoin de synchroniser les médiaqueries avec votre Détection de largeur de pixel javascript, une façon d'aborder le problème est de déclencher la mise en page css modifications basées sur les classes que vous ajoutez avec javascript.

donc, au lieu d'écrire des médiaqueries, écrivez ces déclarations emboîtées dans une classe, dites:

html.myMobileBP { ... }

et dans votre javascript/jQuery, Ajoutez cette classe comme:

if ($(window).width() < myMobileBPPixelSize) {
    $("html").addClass("myMobileBP");
}

pour aller encore plus loin, vous pourriez vouloir considérer le manque de support javascript. Définir les médiaqueries qui sont en outre enveloppées dans une classe html.no-js , puis avec javascript supprimer le Classe .no-js et appliquer la solution ci-dessus en ajoutant des points de rupture via des classes javascript.

suivez ce lien

function getWindowWidth() {
    var windowWidth = 0;
    if (typeof(window.innerWidth) == 'number') {
        windowWidth = window.innerWidth;
    }
    else {
        if (document.documentElement && document.documentElement.clientWidth) {
            windowWidth = document.documentElement.clientWidth;
        }
        else {
            if (document.body && document.body.clientWidth) {
                windowWidth = document.body.clientWidth;
            }
        }
    }
    return windowWidth;
}

utilisez des classes sur le corps pour définir si vous êtes sur mobile, tablette ou bureau à la place en utilisant des pixels.

pour moi ça n'a pas fonctionné document.body.clientWidth ou innerWidth . Ma fonctionnalité s'écrase entre 1023-1040px même si mon code js doit faire cette déclaration:

if($(window).width()<1024)

la solution était de mettre sur le corps une nouvelle classe pour moins de 1024 et l'appeler "small-res" et l'utiliser que dans mon code au lieu de pixels vérification:

if($(body).hasClass('small-res')) 

je vous le recommande aussi.