Javascript matchMedia возвращает противоположное значение на iPhone X + Safari - PullRequest
Новая
       49

Javascript matchMedia возвращает противоположное значение на iPhone X + Safari

1 голос
/ 13 июня 2019

У меня есть FAB (кнопка с плавающим действием) с фиксированной позицией на экране. В Safari для IOS кнопка в конечном итоге прячется за панелью навигации внизу.

1. правильное свернутое меню
2. правильное расширенное меню
3. правильное альбомное меню
4. Кнопка IOS-сафари скрыта FABS

Это нормальный 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, чтобы увидеть, если это устройство IOS, использующее Safari, тогда ему нужно поднять кнопку вверх.

Это исправление JavaScript, которое я добавил для устройств IOS 

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



Понятия не имею, как это исправить.Пожалуйста, помогите любые идеи приветствуются.Заранее спасибо!

1 Ответ

2 голосов
/ 13 июня 2019

Вместо того, чтобы выполнять одноразовый медиа-запрос и затем перехватывать 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');
  }
}

Больше в спецификации .

...