Javascript 在iPhone X+；游猎

我在屏幕上有一个固定位置的FAB（浮动操作按钮），在safari for IOS上，按钮最终隐藏在底部的导航栏后面

一,。折叠菜单正确
2。扩展菜单正确
3。横向菜单正确
4。IOS safari按钮隐藏

这是在除IOS safari之外的所有其他浏览器上正常工作的css

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

我无法使用普通css将按钮移动到更高的位置，因为它会使不使用safari的手机（包括使用google chrome的IOS设备）上的按钮位置过高

为了解决这个问题，我在javascript中添加了一个检查，以查看它是否是使用safari的IOS设备，然后需要将按钮抬起

这是我为IOS设备添加的javascript修复程序

  $(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');
      }

    });
  }
  });

我面临的问题： 在iPhone8及以下的设备上，它能正确识别我的媒体查询，并且按钮的位置非常准确。
在iPhoneX上，它切换媒体查询，并在旋转时注册屏幕为纵向（当屏幕实际为横向时），以及在纵向时注册横向（当屏幕为纵向时）。这会弄乱按钮，并且在方向改变时无法正确显示

我尝试使用我的原始媒体查询来检查设备的高度，这与此相同

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

});

我试图检查方向改变时的旋转角度，但Safari for IOS不支持这一点

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

我不知道还有什么办法可以解决它。请帮忙，任何想法都欢迎。

---

提前谢谢

我想我应该使用媒体查询的回调机制，而不是一次性进行媒体查询，然后挂接

orientationchange

：

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
{
  var query = window.matchMedia("(orientation: landscape)");
  query.addListener(orientationChange); // Or: query.addEventListener("change", orientationChange);
  orientationChange(query);
}

function orientationChange(event) {
  if (event.matches)
  {
    // Landscape
    $('#menuCont').css('bottom','140px');
    $('#otherButtons').css('bottom','145px');
  }
  else
  {
    // Portrait
    $('#menuCont').css('bottom','210px');
    $('#otherButtons').css('bottom','280px');
  }
}

---

更多信息。

您何时运行该代码？您是否检查了在match对象上注册处理程序是否会提供进一步的通知？嗨，T.J，我编辑了它，我在document ready上运行了代码。