IOS 7 - CSS - высота HTML - 100% = 692 пикселей

Question

IOS 7 - CSS - высота HTML - 100% = 692 пикселей

У меня странная ошибка на iPad iOS7 в ландшафтном режиме.

Что мне удалось выяснить, так это то, что в iOS7 window.outerHeight равен 692px, а window.innerHeight 672px; в то время как в предыдущих версиях оба значения были 672px.

Хотя мой <html> а также <body> высота тэгов 100%, кажется, есть место для прокрутки, и странно то, что эта проблема появляется только на landscpae

Вы можете увидеть то, о чем я говорю, посетив t.cincodias.com, например, в iPad для iOS 7 панель нижнего колонтитула (или иногда заголовок) будет обрезана. Но в предыдущих версиях iOS контент отображается нормально в полноэкранном режиме.

Даже когда я устанавливаю высоту обоих тегов в height: 672px !important а также position:absolute; bottom: 0;, вы по-прежнему можете прокручивать содержимое по вертикали, нажав на фрейм (объявления - это фреймы).

Я использую версию-кандидат iOS7

спасибо за любую помощь.

50

html css ios7 mobile-safari

Источник

user676958 17 сен '13 в 16:58

4 ответа

Другие вопросы по тегам html css ios7 mobile-safari

user1238092 28 ноя '13 в 16:39 2013-11-28 16:39 · Answer 1 · 2013-11-28 16:39

Я использовал это решение JavaScript для решения этой проблемы:

if (
    navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && 
    window.innerHeight != document.documentElement.clientHeight
) {
    var fixViewportHeight = function() {
        document.documentElement.style.height = window.innerHeight + "px";
        if (document.body.scrollTop !== 0) {
            window.scrollTo(0, 0);
        }
    };

    window.addEventListener("scroll", fixViewportHeight, false);
    window.addEventListener("orientationchange", fixViewportHeight, false);
    fixViewportHeight();

    document.body.style.webkitTransform = "translate3d(0,0,0)";
}

user1843455 19 сен '13 в 14:48 2013-09-19 14:48 · Answer 2 · 2013-09-19 14:48

Я считаю, что это ошибка в iOS 7 - если вы поворачиваете ее в портретный режим, она устанавливает оба (innerHeight/outerHeight) в одно и то же значение. Если это не ошибка, то в портретном режиме есть, потому что поведение не соответствует.

Вы можете обнаружить iOS 7/ мобильный Safari и использовать window.innerHeight, если iOS 7.

user160691 21 ноя '13 в 18:17 2013-11-21 18:17 · Answer 3 · 2013-11-21 18:17

Я объединю ответы. Спасибо всем!

Вы можете сделать что-то вроде этого:

if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
    $('#yourDivID').height(window.innerHeight);
    window.scrollTo(0, 0);
}

Window.scrollTo решает проблему перекрытия панели в альбомной ориентации при вращении.

Ура!

7

Источник

user160691 21 ноя '13 в 18:17

user3558652 21 янв '15 в 21:31 2015-01-21 21:31 · Answer 4 · 2015-01-21 21:31

Я воспроизводлю ту же проблему в iOS 8.

Вот мое решение.

Я прослушал событие resize, scroll, directionChange, чтобы при изменении размера экрана триггера пользователя вызывать функцию сброса высоты.

Я написал debounce, чтобы предотвратить многократный звонок.

И это в закрытии и не зависит (нет jQuery).

(function(){
  var setViewportHeight = (function(){
    function debounced(){
      document.documentElement.style.height = window.innerHeight + "px";
      if (document.body.scrollTop !== 0) {
          window.scrollTo(0, 0);
      }
    }
    var cancelable = null;

    return function(){
      cancelable && clearTimeout(cancelable);
      cancelable = setTimeout(debounced, 100);
    };
  })();

  //ipad safari
  if(/iPad/.test(navigator.platform) && /Safari/i.test(navigator.userAgent)){  
    window.addEventListener("resize", setViewportHeight, false);
    window.addEventListener("scroll", setViewportHeight, false);
    window.addEventListener("orientationchange", setViewportHeight, false);
    setViewportHeight();
  }
})();