Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Make @media max-width behave the same as $(window).width

Make @media max-width behave the same as $(window).width


While working on a website I encountered a major frustrating, yet logical problem.

Take a look at this fiddle.

Important CSS:

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;

div#wrapper {
    padding: 1em;

img {border: 4px solid blue;}

@media screen and (max-width: 480px) {
    img {border: 0 none;}

Important jQuery:

function imgSize() {
    if ($(window).width() 

Try making the result window smaller than 481px and bigger again. Basic functionality explained: When the window is smaller than 481px in width, the image will be forced a width that's larger than its parent and equal to the window width. You cannot do this with CSS. (If you can, please tell me!) This should give a nice view on mobile devices. To further "beautify" the image, the original border is removed when the screen is between zero and 480px, this is done by Media queries.

All of this works great, until ... a wild scrollbar appears! What happens is that jQuery only takes the "window" into account, whereas the media query also counts the pixels generated by the width of the scrollbar.

Actually, this is quite logical. $(*window*).width() and @media *screen* but it's super frustrating. What is the best way to deal with this issue? Write a custom function in jQuery that comes down to "if scrollbar: add x pixels to the "if window width"-function" in which x is the width of the scrollbar in a specific operating system. Or should we try to bypass this with CSS, or just not using jQuery and CSS interchangeably?

I am not focusing on this issue alone, but on the difference between $(window).width() and media queries in general. In my case, I could actually add border: 0 none to the jQuery and that's that. But unfortunately that's not always possible. Preferably without the use of a plugin!

Problem courtesy of: Bram Vanroy


I think Enquire.js could fix this. It lets you bind JS functions to "media query match and unmatch events".

Using this library you could fire imgSize(); when the media query takes effect, this then eliminates the need for the $(window).width() check using jQuery inside imgSize();.

If you don't want to use a plugin, you could do it this way (copied code, untested) :

var mql = window.matchMedia("(min-width: 480px)");


var handleMediaChange = function (mediaQueryList) {
    if (mediaQueryList.matches) {
        // The browser window is at least 480px wide
    else {
        // The browser window is less than 480px wide

I think in any case its a good idea to bind your function to a media query match event instead of trying to align two different ways of getting the screen width. I'm quite sure the width of the scrollbar isn't the same across browsers, so calculating with it wouldn't be a cross-browser solution.

Solution courtesy of: Mathijs Flietstra


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Make @media max-width behave the same as $(window).width


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription