matchMedia returns null when the FireBug is enabled

问题

My web application uses matchMedia. Sometimes call of this function returns null no matter what value is passed. It is strange but it happens not always (maybe 1 of 3 times) and only in FireFox with opened FireBug. Did anybody face with such issue ?

回答1:

It seems that matchMedia() returns null in FF when it's called in a hidden (display: none) iframe. I've encountered this behavior when I've used jQuery UI's tabs widget, and the tab panels were iframes. My workaround was to override the jQuery UI's .ui-tabs-hide CSS class:

.ui-tabs-hide { display: block !important; position: absolute; left: -99999px; }

回答2:

Matchmedia returns null in case of hidden iframe, You can use this code before accessing window.matchmedia

if(typeof window.matchMedia == 'function' && window.matchMedia!=undefined && window.matchMedia('screen and (max-width: 650px)')!=null){ //Your code goes here }

回答3:

I found I had to do this:

if (w.matchMedia == null ){ 
    format = uformat; 
} else if(w.matchMedia(qo) != null) {
    if (w.matchMedia(qo).matches || w.matchMedia(q).matches ) {  format = mformat; }
} else {
    format = uformat; 
}

来源：https://stackoverflow.com/questions/12056313/matchmedia-returns-null-when-the-firebug-is-enabled