Javascript - 仅在检测到景观时运行我的脚本

Question

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

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

仅当设备处于横向时，脚本才有其逻辑，即 当菜单需要显示通知时。

那么，我的脚本是否可能仅对(max-width:999px) and (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

你可以使用matchMedia解决这个问题：

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

if (matchesMediaQuery) {
    // do something
}

请务必在 MDN 链接中注明浏览器支持。

编辑以提供上下文：

因为用户可能在他们的屏幕上移动，你会想要在每次运行时对 inside VerHayMas 进行评估，以确定是否应该执行脚本的主体：

var clicksVerHayMas = 0;

function VerHayMas() {
    var isLandscapeAndMeetsSizeRequirements = window.matchMedia('(max-width:999px) and (orientation:landscape)').matches;

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

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

所以VerHayMas 将在每次点击时运行，但只有当屏幕满足媒体查询字符串确定的要求时，它才会执行if 块内的代码。

Answer 2

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

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

参考：https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight