Веб-страница не достигает 100% высоты в приложении Twitter на iOS 8

Question

ОС: iOS 8.1.1 Браузер: Safari Телефон: iPhone 5C

У нас есть веб-страница, которая занимает 100% высоты и ширины. Мы заблокировали область просмотра, чтобы пользователь не мог прокручивать страницу вертикально или горизонтально. Эта страница доступна в Twitter через веб-браузер Safari. Когда мы просматриваем веб-страницу в приложении Twitter, нижняя часть страницы обрезается. Мы не можем просматривать страницу целиком. Даже если мы изменим ориентацию несколько раз, отрезанная часть не будет видна.

Высота части, которая обрезается, равна высоте заголовка контейнера приложения Twitter (часть, которая имеет крестик, заголовок страницы / URL-адрес и ссылка общего доступа) и строке состояния (часть, которая имеет значок состояния сети, время, уровень заряда батареи и т. д.)

Примечание. Такое поведение наблюдается только в iOS 8.

Answer 1

Это также сводило меня с ума в течение последних нескольких часов. Решение состоит в том, чтобы не использовать px или процентную высоту / ширину, а использовать position:fixed на ваше html а также body элементы, затем установите top, left, right, bottom в 0. Таким образом, ваш код будет выглядеть так:

html, body{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

Это заставляет контент быть таким же широким и таким же высоким, как и область просмотра, представленная в компоненте веб-просмотра твиттеров, без переполнения. Любой код внутри тела теперь может быть на 100% в любом направлении, не боясь быть скрытым. Эта ошибка также влияла на iOS9. Подтверждено, что исправление работает на iOS9.1 с последним приложением Twitter на ip6/6+, ip5 и ip4.

Answer 2

Для всех, кто сталкивался с этим, исправление, которое я использовал, было

    window.addEventListener("resize", function(){
      onResize();
    });

    function onResize(){
      document.querySelector("html").style.height = window.innerHeight + "px"
    };

    onResize();

похоже, это работает в последней версии браузера Twitter на Safari.