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

【问题标题】：Javascript matchMedia returning opposite value on iPhone X + safariJavascript matchMedia 在 iPhone X + safari 上返回相反的值
【发布时间】：2019-10-27 19:53:06
【问题描述】：

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

1. 折叠菜单正确
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 的手机上太高，包括使用谷歌浏览器的 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');
  }

});

我尝试检查方向更改时的旋转角度，但 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');
  }
});

我不知道如何解决它。请帮助任何想法都欢迎。提前致谢！

【问题讨论】：

什么时候运行该代码？您是否检查过在匹配对象上注册处理程序是否会给您进一步的通知？
嗨 T.J，我编辑了它，我在准备好的文档上运行代码。

标签： javascript ios css media-queries mobile-safari

【解决方案1】：

与其做一次性的媒体查询然后挂钩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 中的更多内容。

【讨论】：