web-dev-qa-db-ja.com

ビューポートの高さの計算Chrome Android with CSS

したがって、モバイルChromeはビューポートの高さにアドレスバーを計算します。このため、height: 100vhは、アドレスバーがスクロールするとビューポートの高さが変わるため、要素では機能しません。

私は実際に 質問を見つける iosで同じ問題を抱えていましたが、さらに調査した結果、これはすべてのモバイルブラウザで発生することに気付きましたChrome=アドレスバーがビューポートからスクロールアウトし、ビューポートにスクロールすると再びビューポートの高さが変わります。

これにより、vhを使用する要素が再計算され、ページがジャンプします。背景画像を使用すると、スクロール時に画像のサイズが変更されるため、非常に迷惑です。

コードと 例

   .jumbotron {
        background-image: url(http://example.com/image.png);
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        height: 100vh;
    }

この問題は、モバイルクロムを使用して上下にスクロールする場合にのみ表示されます。

私の質問はです、これを回避する方法があるかどうか、またはモバイルで全高を計算する方法がない場合は知りたいですchromeページをジャンプさせずに（cssまたはjs）。

http://s.codepen.io/bootstrapped/debug/qadPkz

更新：jqueryを使用する限り、ここで私が思いついたのはかなりうまくいくようです：

function calcVH() {
    $('.jumbotron').innerHeight( $(this).innerHeight() );
}
$(window).on('load resize orientationchange', function() {
  calcVH();
});

上記の実例のデモ

誰かが動作することがわかっているCSSの代替手段を持っている場合でも、javascriptなしでこれを実行できるようにしたいと思います。

cssgoogle-chromemobilebackground-imageviewport
14
Bryan Willis

私が行ったものは次のとおりです。

[〜＃〜] html [〜＃〜]

<div id="selector"></div>

[〜＃〜] css [〜＃〜]

#selector {
   height: 100vh;
}

[〜＃〜] jquery [〜＃〜]

function calcVH() {
    $('#selector').innerHeight( $(this).innerHeight() );
}
(function($) { 
  calcVH();
  $(window).on('orientationchange', function() {
    calcVH();
  });
})(jQuery);

PURE JS（NO JQUERY）

function calcVH() {
  var vH = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  document.getElementById("selector").setAttribute("style", "height:" + vH + "px;");
}
calcVH();
window.addEventListener('onorientationchange', calcVH, true);

#selectorをcssセレクターに変更します。純粋なjsバージョンを使用する場合、.getElementByIDを .getElementsByClassName に変更しない限り、IDを使用する必要があります。

私はこれがモバイルの問題であることに気づいていますChrome Android、しかし、それはChrome iOSについても同じであると推測しています。 mobile detect オプションを追加したい場合、これは必要なときにのみ実行されます。個人的には Detectizr を使用します。既に使用しているのでなければ、このようなものを追加する価値はおそらくないでしょう。

うまくいけば、これはすぐに修正されるので、javascriptソリューションは必要ありません。また、ブラウザの幅が変更された場合に備えて、サイズ変更イベントを追加しようとしましたが、この質問を見た後、回答から削除しました。これらを使用してみたい場合は、上記を次のように変更してください。

[〜＃〜] jquery [〜＃〜]

function calcVH() {
    $('#selector').innerHeight( $(this).innerHeight() );
}
(function($) { 
  calcVH();
  $(window).on('orientationchange resize', function() {
    calcVH();
  });
})(jQuery);

$(window).on('resize orientationchange', function() {

PURE JS（NO JQUERY）

function calcVH() {
  var vH = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  document.getElementById("selector").setAttribute("style", "height:" + vH + "px;");
}
calcVH();
window.addEventListener('onorientationchange', calcVH, true);
window.addEventListener('resize', calcVH, true);
11
Bryan Willis

私はあらゆる提案を試みました...しかし、私には何もうまくいきません。 ChromeまたはIOS。

しかし、その後...私はアイデアを持っていました！

1。標準エントリを先頭に残すことができます

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

2。サイトのFoot（jQueryがあなたの要素について知っていることを確認）にJSを書く

<script type="text/javascript" charset="utf-8">
  (function() {
    function size() {
      // you can change here what you prefer
      if (/Android|webos|iphone|ipad|iPod|blackberry|nokia|opera mini|opera mobi|skyfire|maemo|windows phone|Palm|iemobile|symbian|symbianos|fennec/i.test(navigator.userAgent.toLowerCase())) {
        var theminheight = Math.min(document.documentElement.clientHeight, window.screen.height, window.innerHeight);
        //now apply height ... if needed...add html & body ... i need and i use it
        $('html body #yourelementofchoise').css('height', theminheight);
      }
    }
    window.addEventListener('resize orientationchange', function() {
      size();
    }, false);
    size();
  }());
</script>

。これ以上のナビゲーションバーchromeまたは出力や表示したいものを妨げるものは何もありません

これが誰かの助けになることを本当に願っています！

たぶん、これはそれをはるかに大きくするための単なるテンプレートにすぎません。

3
Blueored