CSS and JS multimedia query synchronization cross browser

When working on responsive projects, I use CSS3 media queries, including with older browsers using response.js. There are times when I also need to use JavaScript / jQuery to control some elements on the page. However, when using $ (window) .width (), this value often differs from the value used in the request for CSS media paper due to browser history and / or the presence of a vertical scroll bar, which means that the CSS media request will fire at a different breakpoint than JS media request.

I know that Modernizr fixes this problem with Modernizr.mq, but it only works in browsers that support CSS multimedia requests, basically it means that it will not work in IE8 and lower. And if you use polyfill to add support for media queries to these old browsers (for example, response.js), then Modernizr.mq no longer works due to conflict / overriding between them.

What I did instead uses a hidden input element on the page and sets it to the CSS width style in each of the media queries. Then I have a function that runs automatically on the page (and when resized), which gets this width value, and does the following:

        if (width == "320px" ) {
            //Functions
        }

        //481px to 600px
        else if (width == "481px" ) {
            //Functions
        }

        //601px to 768px
        else if (width == "601px" ) {
            //Functions
        }

        //769px to 960px
        else if (width == "769px" ) {
            //Functions
        }

        //769 to 1024px
        else if (width == "961px" ) {
            //Functions
        }

        //1024px+
        else {
            //Functions
        }

JS CSS, . , , , , , , .

, ? , , , , .