matchMedia returns null when the FireBug is enable

2019-05-22 20:41发布

问题:

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; 
}