css - iOS 7 iPad Safari ランドスケープの innerHeight/outerHeight レイアウトの問題

Question

iOS 7 の Safari で高さが 100% の Web アプリで問題が発生しています。最終的に、ボディの高さが 100% のアプリでは、20px の余分なスペースが得られます。これは、ユーザーがアプリを上にスワイプすると、ナビゲーション要素がブラウザーのクロムの背後に引っ張られることを意味します。また、画面の下部にある絶対配置要素が 20px ずれることも意味します。

この問題は、こちらの質問でも概説されています: IOS 7 - css - html height - 100% = 692px

そして、このあいまいなスクリーンショットで見ることができます: iOS 7 Safari のアウターハイトの問題

私たちがやろうとしているのは、これをハックして、Apple がバグを修正するまで心配する必要がないようにすることです。

これを行う 1 つの方法は、iOS 7 でのみ本文を絶対的に配置することですが、これにより、余分な 20 ピクセルがページの下部ではなく上部に配置されます。

body {
    position: absolute;
    bottom: 0;
    height: 672px !important;
}

ユーザーがこの問題を認識できないように、outerHeight を強制的に innerHeight に合わせる、またはハッキングすることについての助けをいただければ幸いです。

score 60 · Accepted Answer

私の場合、解決策は位置を固定に変更することでした:

@media (orientation:landscape) {
    html.ipad.ios7 > body {
        position: fixed;
        bottom: 0;
        width:100%;
        height: 672px !important;
    }
}

また、スクリプトを使用して、iOS 7 を搭載した iPad を検出しました。

if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
    $('html').addClass('ipad ios7');
}

score 14 · Accepted Answer

テリー・トールセンも述べているように、サミュエルの答えはうまく機能していますが、WebページがiOSホームに追加されている場合は失敗します.

より直感的な修正は、window.navigator.standalonevar をチェックすることです。

if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && !window.navigator.standalone) {
    $('html').addClass('ipad ios7');
}

この方法では、Safari 内で開いた場合にのみ適用され、ホームから起動した場合には適用されません。

score 2 · Accepted Answer

その問題を解決するために、この 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);
    }
  }.bind(this);

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

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

score 1 · Accepted Answer

サミュエルのアプローチの変形ですが、position: -webkit-sticky を html に設定すると、私にとっては最高の結果が得られました。

@media (orientation:landscape) {
    html.ipad.ios7 {
        position: -webkit-sticky;
        top: 0;
        width: 100%;
        height: 672px !important;
    }
}

「bottom: 0」ではなく「top: 0」であり、ターゲット要素は「body」ではなく「html」であることに注意してください。

score 0 · Accepted Answer

基本的に 2 つのバグがあります - 横向きモードでのウィンドウの高さと、ユーザーが縦向きモードからウィンドウに戻ったときのスクロール位置です。この方法で解決しました：

ウィンドウの高さは次によって制御されます。

// window.innerHeight is not supported by IE
var winH = window.innerHeight ? window.innerHeight : $(window).height();

// set the hight of you app
$('#yourAppID').css('height', winH);

// scroll to top
window.scrollTo(0,0);

これで、上記を関数に入れ、ウィンドウのサイズ変更および/または方向変更イベントにバインドできます。それだけです...例を参照してください：

http://www.ajax-zoom.com/examples/example22.php

score 0 · Accepted Answer

お気に入りバーが表示されている場合、受け入れられた回答は対応しません。これは改善されたキャッチオール修正です：

@media (orientation:landscape) {
  html.ipad.ios7 > body {
    position: fixed;
    height: calc(100vh - 20px);
    width:100%;
  }
}

score 0 · Accepted Answer

受け入れられた回答を参照して、次のルールにも幸運がありました。

html.ipad.ios7 {
    position: fixed;
    width: 100%;
    height: 100%;
}

これには、固定された body 要素の「下」での html 要素のスクロールが停止するように見えるという利点があります。

score 0 · Accepted Answer

同じ問題でこのページに出会いました。ここには多くの有用な回答がありますが、そうでないものもあります（私にとって）。

ただし、私の場合に機能する解決策を見つけました。これは、現在または過去または将来の OS バージョンおよびバグとは完全に無関係に機能します。

説明: クラス名が「module」の固定サイズの複数のモジュールを全画面表示する Web アプリ (ネイティブアプリではない) の開発

.module {position:absolute; top:0; right:0; bottom:0; left:0;}

クラス名「フッター」のフッターを含む

.module > .footer {position:absolute; right:0; bottom:0; left:0; height:90px;}

フッターの高さを後で別の高さに設定した場合、またはその高さがコンテンツによって設定された場合でも、次のコードを使用して修正できます。

function res_mod(){
    $('.module').css('bottom', 0); // <-- need to be reset before calculation
    var h = $('.module > .footer').height();
    var w = window.innerHeight;
    var o = $('.module > .footer').offset();
    var d = Math.floor(( w - o.top - h )*( -1 ));
    $('.module').css('bottom',d+'px'); // <--- this makes the correction
}

$(window).on('resize orientationchange', res_mod);

$(document).ready(function(){
    res_mod();
});

Matteo Spinelli のスキルのおかげで、iScroll を問題なく使用できます。幸いなことに、変更イベントは後で発生します。そうでない場合は、修正後に iScroll-init を再度呼び出す必要があります。

これが誰かに役立つことを願っています

score -1 · Accepted Answer

試してみたらどうですか

html{ bottom: 0;padding:0;margin:0}body {
position: absolute;
bottom: 0;
height: 672px !important;
}

css - iOS 7 iPad Safari ランドスケープの innerHeight/outerHeight レイアウトの問題

13 に答える 13

Related

Reference