matchMedia не моделирует медиазапросы CSS, полностью относящиеся к ориентации устройства - PullRequest
Новая
       24

matchMedia не моделирует медиазапросы CSS, полностью относящиеся к ориентации устройства

0 голосов
/ 03 апреля 2019

Я немного запутался с matchMedia в JavaScript.Я создал JavaScript-версию этого кода медиазапросов CSS и ожидал, что он будет отображать, как 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>
...