IOS 7 - css - высота html - 100% = 692px

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

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

Несмотря на то, что теги <html> и <body> имеют высоту 100%, кажется, что есть пространство для прокрутки, и странно, что эта проблема возникает только при использовании ландшафтного ландшафта

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

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

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

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

Ответ 1

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

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

Ответ 2

Я использовал это решение 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)";
}

Ответ 3

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

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

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

Window.scrollTo решает проблему перекрытия полосы в ландшафте при вращении.

Ура!

Ответ 4

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

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

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

Я написал 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();
  }
})();