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

Question

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

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 的手机上太高，包括 IOS 使用 google 的设备 chrome。

为了解决这个问题，我在 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');
  }

});

我试图检查方向改变时的旋转角度，但是 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

与其执行 one-off 媒体查询然后挂钩 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 中的更多内容。

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

Javascript matchMedia returning opposite value on iPhone X + safari

javascript

css

mobile-safari

ios

media-queries