javascript - window.matchMedia 侦听器未触发

Question

我注意到一个奇怪的错误，我想知道是否有其他人遇到过或者可以阐明我可能做错了什么。

我正在使用 window.matchMedia 来监视/检测页面方向是否发生变化。我在媒体查询中也有一些单独的 css。但是，当我在 css 中有一个与我试图在 js 中收听的媒体查询相同的媒体查询时，它似乎没有触发。

这是我正在使用的js代码

var current_orientation = 'unknown';
var orientation_match = window.matchMedia("(orientation:portrait)");

orientation_match.addListener( function (match) { 

    if(match.matches)
    {
        current_orientation = 'portrait';
    }
    else
    {
        current_orientation = 'landscape';
    }

    console.log('Orientation updated: ' + current_orientation);

});

if(orientation_match.matches)
{
    current_orientation = 'portrait';
}
else
{
    current_orientation = 'landscape';
}

console.log('Orientation: ' + current_orientation);

这很好用，但是一旦我将以下内容添加到我的 css 中，它就不会触发侦听器代码。

@media screen and (orientation: portrait) {

    header
    {
        height: 60px;
    }

}