Неправильная область просмотра / высота страницы во встроенном браузере Facebook в iOS 9.x

Question

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

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

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

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

Answer 1

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

• 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 метатег с <!-- htmlmin:ignore --> Комментарии.

Answer 2

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

Answer 3

Для тех, кто ищет альтернативу ответу Мартина, вы также можете обновить свой 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();
  ...

Answer 4

Чтобы понять причину ошибки с высотой, вам нужно знать, как открывается браузер 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 поможет с этим