$ (window) .width () différent de la requête multimédia

Question

$ (window) .width () différent de la requête multimédia

Demandé el 10 de Octobre, 2013: Quand la question a-t-elle été
15802 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je suis en utilisant Twitter Bootstrap sur un projet. Ainsi que le défaut de bootstrap styles j'ai aussi ajouté quelques-unes de mes propres

//My styles
@media (max-width: 767px)
{
    //CSS here
}

Je suis également à l'aide de jQuery pour modifier l'ordre de certains éléments sur la page lorsque la largeur de la fenêtre d'affichage est moins que 767px.

$(document).load($(window).bind("resize", checkPosition));

function checkPosition()
{
    if($(window).width() < 767)
    {
        $("#body-container .main-content").remove().insertBefore($("#body-container .left-sidebar"));
    } else {
        $("#body-container .main-content").remove().insertAfter($("#body-container .left-sidebar"));
    }
}

Le problème que j'ai, c'est que la largeur calculée en $(window).width() et la largeur calculée par le CSS ne semble pas être le même. Lors de l' $(window).width() retours 767 le css calcule la largeur de la fenêtre d'affichage comme 751 il semble donc y avoir un 16px différents.

Personne ne sait quelle en est la cause et comment je pourrais résoudre le problème? Les gens ont suggéré que la largeur de la barre de défilement n'est pas pris en examen et l'utilisation de $(window).innerWidth() < 751 est le chemin à parcourir. Toutefois, idéalement, j'aimerais trouver une solution qui calcule la largeur de la barre de défilement et qui est compatible avec ma requête de média (e.g où les deux conditions sont à vérifier par rapport à la valeur 767). Parce que sûrement pas tous les navigateurs ont une barre de défilement largeur de 16px?

Demandé el 10 de Octobre, 2013 par Pattle

Answer 1

5 Réponses

Answer 2

317voto

ausi Points 1962

Si vous n'avez pas à appuyer IE9, vous pouvez utiliser window.matchMedia() (MDN documentation).

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

window.matchMedia est pleinement compatible avec les CSS media queries et la prise en charge du navigateur est assez bonne: http://caniuse.com/#feat=matchmedia

Mise à JOUR:

Si vous avez à l'appui de plus en plus de navigateurs, vous pouvez utiliser de Modernizr mq méthode, il prend en charge tous les navigateurs qui comprennent les media queries CSS.

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

Répondu el 28 de Mars, 2014 par ausi (1962 Points )

Answer 3

187voto

NateS Points 1528

Vérifiez une règle CSS que la requête multimédia change. Ceci est garanti pour toujours fonctionner.

http://www.fourfront.us/blog/jquery-window-width-and-media-queries

html:

 <body>
    ...
    <div id="mobile-indicator"></div>
</body>

javascript:

 function isMobileWidth() {
    return $('#mobile-indicator').is(':visible');
}

css:

 #mobile-indicator {
    display: none;
}

@media (max-width: 767) {
    #mobile-indicator {
        display: block;
    }
}

Répondu el 25 de Janvier, 2014 par NateS (1528 Points )

Answer 4

33voto

Rohan Kumar Points 18192

Cela peut être dû à scrollbar , utilisez innerWidth au lieu de width comme

 if($(window).innerWidth() <= 751) {
   $("#body-container .main-content").remove()
                                .insertBefore($("#body-container .left-sidebar"));
} else {
   $("#body-container .main-content").remove()
                                .insertAfter($("#body-container .left-sidebar"));
}

Aussi, vous pouvez obtenir le viewport comme

 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' ] };
}

Source de code ci-dessus

Répondu el 10 de Octobre, 2013 par Rohan Kumar (18192 Points )

Answer 5

9voto

Rantiev Points 346

oui, c'est à cause de la barre de défilement. Source de réponse correcte: entrez la description du lien ici

 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' ] };
}

Répondu el 19 de Février, 2014 par Rantiev (346 Points )

Answer 6

5voto

gramgram Points 273

Il est peut-être préférable de ne pas utiliser JS-scope pour la largeur du document mais de modifier la requête css @media. Avec cette méthode, vous pouvez être sûr que la fonction JQuery et le changement CSS se produisent en même temps.

css:

 #isthin {
    display: inline-block;
    content: '';
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media only screen and (max-width: 990px) {
    #isthin {
        display: none;
    }
}

jquery:

 $(window).ready(function(){
    isntMobile = $('#isthin').is(":visible");
    ...
});

$(window).resize(function(){
    isntMobile = $('#isthin').is(":visible");
    ...
});

Répondu el 25 de Mars, 2014 par gramgram (273 Points )

$ (window) .width () différent de la requête multimédia

Réponses

Mise à JOUR:

Questions en vedette

Top Tags

Prograide.com

Powered by:

$ (window) .width () différent de la requête multimédia

Réponses

Mise à JOUR:

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: