Javascript matchMedia 在 iPhone X + safari 上返回相反的值

Question

我有一个在屏幕上固定位置的 FAB( float 操作按钮)，在 IOS 的 safari 上，该按钮最终隐藏在底部导航栏的后面。

1.折叠菜单正确
2.展开菜单正确
3.横向菜单正确
4.IOS safari按钮隐藏

这是正常的 css，适用于除 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;
    } 
}

我无法使用普通 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');
      }

    });
  }
  });

我面临的问题:在 iPhone 设备 8 及以下版本上，它可以正确识别我的媒体查询，并且按钮位置完美。
在 iPhone X 上，它切换媒体查询并在旋转时注册屏幕在实际横向时是纵向的，并在它是纵向时注册横向。这会弄乱按钮，并且它们在方向更改时无法正确显示。

我尝试使用我原来的媒体查询来检查设备高度，这也是一样的。

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

});

我试图检查方向变化时的旋转 Angular ，但 IOS 的 Safari 不支持这个。

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

我不知道还有什么办法可以解决它。请帮助任何想法，欢迎。提前致谢!

Answer 1

与其进行一次性媒体查询然后 Hook 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');
  }
}

更多信息 the spec .