CSS Media Query and Javascript/jQuery don't match up

Question

In my CSS I have a media query like so:

@media (min-width: 800px) { /* styles */ }

And then in my jQuery, I'm targeting the window width and performing some actions.

Edit: as per the answers below, I have changed this function but my JS and CSS still didn't align. The problem was fixed by using the Modernizr function as specified in the accepted answer.

$(window).resize(function() {
    var viewportWidth = $(window).width();
    if (viewportWidth >= 800) {
        // do something
    }
});

The problem is that while the jQuery is executing bang on 800px or more, the CSS is kicking in at 740px.

Is there a known problem with these not aligning? Or could there be something on my page affecting the CSS and why it's 740px not 800px? Maybe there's something else I should be using instead of $(window)?

Edit: I've tested in Safari and it works perfectly. In Chrome and Firefox, the jQuery functions run spot on to 800px and so does the CSS. But in Chrome, the CSS actually runs after 740px, even though the media query is 800px - how can I get these to align perfectly?

Jonathan Wilson · Accepted Answer · 2013-10-21 15:30:12Z

3

You can use Modernizr to execute the media query in JS (the mq() method will return a boolean):

$(window).resize(function() {
    if (Modernizr.mq('(min-width: 800px)')) {
        // do something
    }
});

edited Oct 21, 2013 at 15:30

answered Aug 16, 2012 at 20:39

Jonathan Wilson

4,3052 gold badges27 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jonathan Wilson Over a year ago

Just wanted to add that you'll need a pair of parentheses around the min-width media query to make the second option work (answer edited): Modernizr.mq('(min-width: 800px)')

shrewdbeans Over a year ago

It was the second function that worked for me. Can you perhaps edit your reply to reflect this? By using Modernizr my JS aligns perfectly with my CSS.

Naftali · Accepted Answer · 2012-08-16 20:39:42Z

2

Move your width check, or else the viewportWidth variable will always be the same thing:

$(window).resize(function() {
    var viewportWidth = $(this).width();
    if (viewportWidth >= 800) {
        // do something
    }
});

answered Aug 16, 2012 at 20:39

Naftali

147k41 gold badges247 silver badges304 bronze badges

Comments

Roman Liutikov · Accepted Answer · 2012-08-16 20:43:39Z

2

Valid code would be:

$(window).resize(function() {

    var viewportWidth = $(window).width();

    if (viewportWidth >= 800) {
        // do something
    }
});

Everytime window resizes the new value will be stored in viewportWidth variable. In your code viewportWidth gets the only value of the $(window).width() when the page was loaded.

answered Aug 16, 2012 at 20:43

Roman Liutikov

1,3481 gold badge10 silver badges17 bronze badges

Comments

Edward Falk · Accepted Answer · 2013-06-12 20:56:05Z

1

What I just tried, and it seems to work, is to use the CSS media query to style an object, and then use javascript to test if the object has that style. Javascript is asking CSS what the answer is, rather than having two parts of the page determine it separately:

CSS:

@media (min-width: 800px) {  
    #viewType {width:3px;}
}

HTML :

<div id="viewType" style="display:none"></div>

JavaScript:

var answer = ($("#viewType").width()==3)

edited Jun 12, 2013 at 20:56

Edward Falk

10.2k11 gold badges84 silver badges124 bronze badges

answered Jun 12, 2013 at 20:35

Steve

1,3861 gold badge14 silver badges22 bronze badges

Comments

Edwin Wong · Accepted Answer · 2014-01-14 05:35:10Z

I agree with Steve answer. the jquery(window).width(); is does not match with the media queries and even doesn't provide accurate window width size. here is my answer taken from Steve and modified.

CSS :
        @media (max-width: 767px) {

           //define your class value, anything make sure it won't affect your layout styling
           .open {
            min-width: 1px !important;
           }
        } 

        .open {
              min-width: 2px;
        }

Js :

// when re-sizing the browser it will keep looking for the min-width size, if the media query is invoked the min-width size will be change.

$(window).on('resize orientation', function() {

    var media = $('.open').css('min-width');

    if( media == '1px') // means < 767px 
    {       
        // do your stuff
    }

});

That's it~ hope it help.

Collectives™ on Stack Overflow

CSS Media Query and Javascript/jQuery don't match up

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related