Javascript - 仅在检测到横向时运行我的脚本

Question

我正在运行一个脚本来在带有滚动的菜单中显示通知，但我不知道如何检测设备是否有方向景观来验证脚本。

onClick="VerHayMas();" 调用完美无缺，但如果用户打开菜单一次，点击 #boton-menu 并且您的设备处于纵向，将方向更改为横向后，脚本不再符合目标。

The script has its logic ONLY if the device is in landscape, which is when the menu needs to show the notification.

那么，有没有可能我的脚本只对 (max-width:999px) 和 (orientation:landscape) 有效，而忽略肖像...？

我是 JS 初学者，我真的不知道该怎么做。

有什么想法吗？

提前致谢!

HTML 和 CSS

#mas-menu {display:none}

<div id="boton-menu" onClick="VerHayMas();">+</div>

脚本:

var clicksVerHayMas = 0;

function VerHayMas() {
    clicksVerHayMas = clicksVerHayMas + 1;
    if (clicksVerHayMas == 1) {
        document.getElementById('mas-menu').style.display = 'block';

        window.setTimeout(function() {
            $('#mas-menu').fadeOut('slow');
        }, 4000);
    }
};

编辑:

我已经尝试使用以下脚本，但它不起作用。如果用户在纵向模式下调用 onClick="VerHayMas();"，脚本将不再以横向模式运行。

我在这里做错了什么？

const matchesMediaQuery = window.matchMedia('(max-width:999px) and (orientation:landscape)').matches;

if (matchesMediaQuery) {

var clicksVerHayMas = 0;
  function VerHayMas() {
  clicksVerHayMas = clicksVerHayMas +1;
  if(clicksVerHayMas == 1){
  document.getElementById('mas-menu').style.display = 'block';

  window.setTimeout(function(){
  $('#mas-menu').fadeOut('slow');
  },4000);
  }};
}

Answer 1

我会保持简单，如果屏幕高度小于宽度，则用户处于横向模式。你可以从全局 window 中获取高度和宽度对象。

if (window.innerWidth > window.innerHeight) {
    // The user is in landscape mode!
    userInLanscapeFunc();
} 

引用:https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight