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

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

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

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

Answer 2

您可以使用matchMedia解决此问题：

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

if (matchesMediaQuery) {
    // do something
}

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

编辑要提供的内容：

由于用户可能在屏幕上四处移动，因此您希望每次运行时在 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块内的代码。

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

2 个答案: