javascript - 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>