javascript - window.matchMedia リスナーがトリガーしない

Question

奇妙なバグに気付きました。他の誰かが遭遇したかどうか、または私が間違っている可能性があることについて何か光を当てることができるかどうか疑問に思っていました。

ページの向きが変わるかどうかを監視/検出するために window.matchMedia を使用しています。また、メディアクエリには別の css があります。ただし、js でリッスンしようとしているメディア クエリと同じ css にメディア クエリがある場合、トリガーされないようです。

これが私が使用している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;
    }

}