Неверная высота видового экрана/страницы в встроенном браузере Facebook в iOS 9.x

При открытии демонстрационного приложения из core-layout с помощью встроенного браузера в приложении Facebook на iOS 9.x (как минимум) элемент нижнего колонтитула не отображается, когда устройство находится в портретном режиме. Если перевести устройство в альбомный режим, нижний колонтитул будет частично виден. Однако нижний колонтитул (с кнопкой) должен быть полностью виден.

На первом изображении показано, как должно выглядеть демонстрационное приложение, а на втором изображено, как в демонстрационном приложении отсутствует нижний колонтитул при просмотре с помощью встроенного веб-представления приложения Facebook (изображения были получены из браузера Chrome для настольных ПК, иллюстрируя, как проявляется ошибка):

How the demo _should_ look. Demo with missing footer.

После проверки множества различных гипотез мы пришли к выводу, что ошибка была вызвана тем, что браузер сделал страницу/область просмотра выше видимой области.

Эта ошибка, похоже, связана с проблемами в области просмотра iOS9 Safari, мета неправильно масштабируется? и веб-страница не получает 100% высоты в приложении Twitter на iOS 8.

Ответ 1

Решение, с которым мы столкнулись, было комбинацией других ответов, которые мы нашли в StackOverflow, уделяя при этом особое внимание деталям. Подчеркнем, что реализация только некоторых из нижеперечисленных изменений не исправила ошибку; все изменения должны были быть сделаны.

  • CSS, определяющий высоту оберточного элемента div (#outer-wrap), должен был быть изменен с

    outer-wrap {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    

    to

    html, body, #outer-wrap {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      overflow: hidden;
    }
    
  • В библиотеку была добавлена ​​следующая функция и вызывается при инициализации:

    function _fixViewportHeight() {
        var html = document.querySelector('html');
    
        function _onResize(event) {
            html.style.height = window.innerHeight + 'px';
        }
    
        window.addEventListener('resize', _.debounce(_onResize, 125, {
            leading: true,
            maxWait: 250,
            trailing: true
        }));
    
        _onResize();
    }
    
    _fixViewportHeight();
    
  • Метатег viewport должен был быть

    <meta name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi">
    

    Однако значения шкалы должны были быть 1.0, а не 1; что заставило исправить разрыв в одном из наших процессов сборки, где мы применили html-minifier, который заменил десятичные значения целыми. Проблема html- minifier была исправлена ​​путем окружения метатега viewport комментариями <!-- htmlmin:ignore -->.

Ответ 2

Была та же проблема, но все, что мне нужно было сделать, это использовать window.innerHeight вместо document.body.clientHeight.

Ответ 3

Чтобы понять причину ошибки с высотой, вам нужно знать, как открывается браузер FB в приложении: у него есть анимация при открытии, и размер браузера увеличивается снизу вверх. И поэтому высота стартовой страницы, рассчитанная JS, может быть неверной

  • window.innerHeight,
  • document.documentElement.clientHeight,
  • document.body.clientHeight
  • element.style.height = '100vh'

Высота может быть меньше конечной высоты страницы, потому что JS может выполняться во время открытия анимации, пока высота браузера все еще увеличивается

Я решил эту проблему, достигнув screen.height, который всегда постоянен

определить, когда приложение открывается в браузере в приложении Facebook Я использую функцию отсюда Как определить в приложении браузер Facebook?

function isFacebookApp() {
    var ua = navigator.userAgent || navigator.vendor || window.opera;
    return (ua.indexOf('FBAN') > -1) || (ua.indexOf('FBAV') > -1);
}

PS такая же ошибка может быть с вычислением ширины, screen.width поможет с этим

Ответ 4

Для тех, кто ищет альтернативы Мартину, вы также можете обновить свой CSS при обнаружении браузера Facebook в приложении.

Моя проблема была связана с CSS: нижние элементы были скрыты.

function adaptCSSFbBrowser() {
  var ua = navigator.userAgent || navigator.vendor || window.opera;
  if (isFacebookApp(ua)) { // Facebook in-app browser detected
      $('.bottombar').css('height', '50vh'); // Update css
  }
};

И затем:

$(document).ready(function() {
  adaptCSSFbBrowser();
  ...