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

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

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

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

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


twitter ios8.1
person user2534168    schedule 09.12.2014    source источник

Ответы (2)


arrow_upward
5
arrow_downward

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

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

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

person jwhazel    schedule 13.11.2015

arrow_upward
3
arrow_downward

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

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

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

    onResize();

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

person Alex Bergin    schedule 21.09.2015