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

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

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

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

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

Ответ 1

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

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

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

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 комментариями .

Ответ 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();
  ...