Question

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

1.正确的折叠菜单
2.正确的展开菜单
3.正确的横向菜单
4.隐藏的iOS苹果浏览器按钮

这是正常的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的情况下，我无法将按钮移得更高，因为这会使按钮在不使用野生动物园的手机（包括使用谷歌浏览器的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');
  }

});

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

我不知道该如何解决。请帮助任何想法，欢迎。预先感谢！

Answer 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中的更多内容。

Javascript matchMedia在iPhone X +野生动物园上返回相反的值

1 个答案: