matchMedia不会完全参考设备方向来模拟CSS媒体查询

Question

我对JavaScript的matchMedia感到困惑。我创建了此CSS媒体查询代码的JavaScript版本，并期望它将像纵向和横向的媒体查询CSS版本一样完美显示

在移动设备上但在计算机上，当我调整浏览器的大小时，JavaScript版本首先显示横向，然后再调整大小，然后开始显示纵向代码，但是CSS版本显示

不这样做。CSS版本实际上检测到设备方向的变化，那么为什么我在JavaScript版本中获得这种效果？以及如何使其更类似于CSS版本？还是应该使用另一种方法更有效地做到这一点？

CSS版本

#output{
color: white;
}

@media only screen 
and (min-width : 320px) 
and (max-width : 736px){
#output{
 background-color: red;
}
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 736px) 
and (orientation : landscape){
#output{
 background-color: blue;
}
}

<meta name="viewport" content="width=device-width">

<style>

</style>

<p id='output'>XXX</p>

JavaScript版本

document.addEventListener('DOMContentLoaded',function(){

/*---------------------------------------------------------------------------------------------------------------------------------------------
Media query 1
---------------------------------------------------------------------------------------------------------------------------------------------*/

var media_query_1 = window.matchMedia('(min-width : 320px) and (max-width : 736px) and (orientation : portrait)');
media_query_1.addListener(mediaQuery1Function);
mediaQuery1Function(media_query_1);

function mediaQuery1Function(media_query_1){
  
  if(media_query_1.matches){
		document.querySelector('#output').style.backgroundColor='red';
  } 
  
  else{
   //Nothing
  }
  
}

/*---------------------------------------------------------------------------------------------------------------------------------------------
Media query 2
---------------------------------------------------------------------------------------------------------------------------------------------*/

var media_query_2 = window.matchMedia('(min-width : 320px) and (max-width : 736px) and (orientation : landscape)');
media_query_2.addListener(mediaQuery2Function);
mediaQuery2Function(media_query_2);

function mediaQuery2Function(media_query_2){
  
  if(media_query_2.matches){
		document.querySelector('#output').style.backgroundColor='blue';
  } 
  
  else{
   //Nothing
  }
  
}
  
});

#output{
	color: white;
}

<meta name="viewport" content="width=device-width">

<style>

</style>

<script>

</script>

<p id='output'>XXX</p>