Javascript matchMedia returning opposite value on iPhone X + safari

I have a FAB(floating action button) with a fixed position on the screen, On safari for IOS the button ends up hiding behind the navigation bar at the bottom.

1. collapsed menu correct
2. expanded menu correct
3. landscape menu correct
4. IOS safari button hidden

This is the normal css that works on all other browsers except IOS safari

 #menuCont /*The menu button you click to expand the menu*/
{
    position: fixed;
  bottom: 110px;
    right: 75px;
}

#otherButtons /*The expanded menu buttons - by default they are hidden. On click of the FAB they display block*/
{
    position: fixed;
    bottom: 180px;
    right: 80px;
    display: none;
}


@media (max-height: 400px) /*Media query to check if the phone is in landscape or the screen is too small to hold the expanded menu. The buttons display in a horizontal row instead of vertically*/
{
    #menuCont 
  {
        bottom: 140px;
    }

    #otherButtons
  {
        bottom: 145px;
        right: 150px;
    } 
}

I cannot move the button any higher with normal css as it makes the button sit too high on phones that do not use safari, including IOS devices using google chrome.

To remedy this I added a check in javascript to see if it is an IOS device using safari then it needs to lift the button up.

This is the javascript fix I added for IOS devices

  $(document).ready(function () {
  var ua = window.navigator.userAgent;
  var iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i);
  var webkit = !!ua.match(/WebKit/i);
  var iOSSafari = iOS && webkit && !ua.match(/CriOS/i);

  if(iOSSafari) //If it is an IOS device using safari
  {
    if (window.matchMedia("(orientation: landscape)").matches) //This works as expected
    {
      $('#menuCont').css('bottom','140px');
      $('#otherButtons').css('bottom','145px');
    }
    else
    {
      $('#menuCont').css('bottom','210px');
      $('#otherButtons').css('bottom','280px');
    }

    window.addEventListener("orientationchange", function() { //on rotation

      if (window.matchMedia("(orientation: landscape)").matches){ //landscape
        $('#menuCont').css('bottom','140px');
        $('#otherButtons').css('bottom','145px');
      }
      else //if it is portrait
      {
        $('#menuCont').css('bottom','210px');
        $('#otherButtons').css('bottom','280px');
      }

    });
  }
  });

The problem I face: On iPhone devices 8 and below it correctly recognises my media query and the buttons are positioned perfectly.
On iPhone X onwards it switches the media query and on rotation registers that the screen is portrait when it's actually landscape, and registers landscape when it's portrait. This messes up the buttons and they don't display correctly on orientation change.

I tried to use my original media query to check the device height, this does the same thing.

window.addEventListener("orientationchange", function() {

  if (window.matchMedia("(max-height: 400px)").matches) {
    $('#menuCont').css('bottom','140px');
    $('#otherButtons').css('bottom','145px');
  }
  else {
    $('#menuCont').css('bottom','210px');
    $('#otherButtons').css('bottom','280px');
  }

});

I tried to check the angle of rotation on orientation change, but Safari for IOS does not support this.

window.addEventListener("orientationchange", function() {


  if(screen.orientation.angle == 90 || screen.orientation.angle == 270)
  {
    $('#menuCont').css('bottom','140px');
    $('#otherButtons').css('bottom','145px');
  }
  else{
     $('#menuCont').css('bottom','210px');
    $('#otherButtons').css('bottom','280px');
  }
});

I have no idea how else to fix it. Please help any ideas are welcome. Thanks in advance!