CODEWITHSUNDEEP
cssmedia-queriesbackwards-compatibilitymodernizrhtml5shiv
CodeGodie
CodeGodie

Reputation: 12132

Modernizer JS Media Query check. Load / Unload

I am working on a code that checks if the browser supports Media Queries. If it does, it then checks the window width and if it falls under 700px it loads a CSS file, but if the window width resizes and goes back to something wider than 700px, the CSS file does not "unload" and thus, it looks bad. Can you please help me understand what and how is the best way to use this? Here's my code:

         function check_media_query_support() {
            if (!Modernizr.mq('only all')) {
                if ($(window).width() <= 700) {
                    Modernizr.load({
                        load:'../styles/jquery-ui/test_unsupported_mq_700.css'
                    });
                } else {

                }
                if ($(window).width() <= 400) {
                    Modernizr.load({
                        load: '../styles/jquery-ui/test_unsupported_mq_400.css'
                    });
                }
            }
        }

        function resizeUi() {
             check_media_query_support();
        }

Upvotes: 0

Views: 196

Answers (1)

Patrick
Patrick

Reputation: 13974

Modernizr won't listen to window size changes, with the functionality you are looking for, you actually probably want a responsive polyfill, like respond.js

Upvotes: 1

Related Questions