web-dev-qa-db-ja.com

IOS 7-css-html height-100％= 692px

IPad iOS7ランドスケープモードに奇妙なバグがあります。

私が調査できたのは、iOS7ではwindow.outerHeightが692pxであり、window.innerHeightが672pxであるということです。以前のバージョンでは、両方の値は672pxです。

<html>および<body>タグの高さは100％ですが、スクロール用のスペースがあるように見えますが、奇妙なことに、この問題はlandscpaeでのみ表示されます

T.cincodias.comにアクセスすると、私が話している内容を確認できます。たとえば、iOS 7 iPadでは、フッターバー（またはヘッダー）がカットされます。ただし、以前のiOSバージョンでは、コンテンツはフルスクリーンで正常に表示されます。

両方のタグの高さをheight: 672px !importantおよびposition:absolute; bottom: 0;に設定しても、iframeに触れることでコンテンツを垂直にスクロールできます（広告はiframeです）。

IOS7のリリース候補バージョンを実行しています

助けてくれてありがとう。

htmlcssmobile-safariios7
50
Pedro Garcia Mota

この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)";
}
16
czuendorf

これはiOS 7のバグだと思います-ポートレートモードに回転すると、両方（innerHeight/outerHeight）が同じ値に設定されます。バグではない場合、動作に一貫性がないため、ポートレートモードにバグがあります。

IOS 7 /モバイルSafariを検出し、iOS 7の場合はwindow.innerHeightを使用できます。

15
ururk

答えを組み合わせます。皆さんありがとう！

次のようなことができます：

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

Window.scrollToは、回転するときに横向きのバーの問題を解決します。

乾杯！

7
agfa555

IOS 8でも同じ問題を再現しています。

これが私の解決策です。

resize、scroll、orientationChangeイベントをリッスンしました。ユーザーが画面サイズの変更をトリガーすると、高さリセット機能が呼び出されます。

デバウンスを書いて、複数の呼び出しを防ぎます。

そして、それはクロージャと依存なし（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();
  }
})();
1
Eric Chen