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

}