Javascript - Run my script only if landscape is detected

Question

I am running a script to show a notification within a menu with scroll, but I do not know how to detect if the device has orientation landscape to validate the script.

The call onClick="VerHayMas();" works perfectly, but if the user open the menu once, clicking on #boton-menu and with your device in portrait, after changing the orientation to landscape the script no longer meet the objective.

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

So, is it possible that my script is only valid with (max-width:999px) and (orientation:landscape), ignoring the portrait...?

I am a beginner in JS, and I do not know how to do it, really.

Any idea?

Thanks in advance!

HTML & CSS

#mas-menu {display:none}

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

Script:

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);
    }
};

EDIT:

I have tried with the following script, but it does not work. If the user makes a call to onClick="VerHayMas();" in portrait mode, the script is no longer running in landscape mode.

What am I doing wrong here?

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

I'd keep it simple, if screen height is less than width, then the user is in landscape mode. You can grab the height and width from the global window object.

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

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

Answer 2

You can solve this using matchMedia:

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

if (matchesMediaQuery) {
    // do something
}

Make sure to note the browser support in the MDN link.

EDIT TO PROVIDE CONTEXT:

Because the user may be moving around their screen, you will want to make this evaluation inside VerHayMas, each time it is run, to determine if the main body of the script should be executed:

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);
        }
    }
};

So VerHayMas will be run on every click, but only if the screen meets the requirements as determined by the media query string will it execute the code inside the if block.