Refresh the page once when media query is triggered?

问题

I want to use jQuery to trigger a page refresh, only once, when a media query has been triggered.

This is how I detect my media query:

function media_query(obj) {
    size = obj();
    if (size != currentSize) {

        if (size == 'mobile') {
            location.reload(); 
            currentSize = 'mobile';
        }
        if (size == 'tablet') {
            location.reload(); 
            currentSize = 'tablet';
        }
        if (size == 'laptop') {

            currentSize = 'laptop';
        }
    }

};

$(window).resize(_.debounce(function () {
    media_query(mqCSS);
}, 10));


$(window).load(function () {
    media_query(mqCSS);
});

With this code the page just constantly refreshes while I only want to do it the one time when mobile or tablet equal true.

回答1:

You can append a parameter to the querystring with the first reload.

location.href = "http://yourpage.com/?reload=1"; 

to avoid the infinite loop you can trigger the redirect only if the parameter is missing.

回答2:

you can use the cookie to make a identifier.

来源：https://stackoverflow.com/questions/21408927/refresh-the-page-once-when-media-query-is-triggered