web-dev-qa-db-ja.com

Get Android ChromeブラウザアドレスバーのJSの高さ

ChromeブラウザのAndroid（左の画像で赤い長方形でマークされている））でJavaScriptのアドレスバーの高さを取得するにはどうすればよいですか？下にスクロールすると消えてしまい、ビューポートの高さが違うのでそれに対応する必要があります。

enter image description here

私がすでに考え出した1つの解決策：

  1. 初期状態でのビューポートの高さを取得：var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

  2. アドレスバーが消えたときにビューポートの高さを取得する

  3. 両方の値の差を計算する

問題は、それを知るには2番目の状態でなければならないということです。

javascripthtmlcssgoogle-chromeandroid-chrome
3
Erando

私にとって最善のアプローチは、そのようなものを持つことでした：

$(document).ready(function(){   

var viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var isPortrait = viewportHeight > viewportWidth;

$( window ).resize(onresize);

function onresize() {
        var newViewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
        var newViewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
        var hasOrientationChanged = (newViewportHeight > newViewportWidth) != isPortrait;
        var addressbarHeight = 130;

        if (!hasOrientationChanged && (newViewportHeight != viewportHeight)) {
            addressbarHeight = Math.abs(newViewportHeight - viewportHeight);
            if (newViewportHeight < viewportHeight) {
                // Android Chrome address bar has appeared
            } else {
                // Android Chrome address bar has disappeared
            }
        } else if(hasOrientationChanged) {
            // Orientation change
        }

        viewportHeight = newViewportHeight;
        viewportWidth = newViewportWidth;
        isPortrait = viewportHeight > viewportWidth;
}
});
0
Erando

あなたが探しているのは rl bar resizing です。 Androidのchrome v56なので、David Bokanはモバイルでvh unitを使用することをお勧めします。その中にデモがあります記事、リンクをクリックして詳細情報とモバイルでの使用方法を取得します。

ユーザーがページを下にスクロールすると、window.resizeイベントがスローされます。このイベントをイベントリスナーでキャッチすることで、ページを更新できます。

詳細： mobile chromeスクロール時にサイズ変更イベントを起動

2
Sunchock

今日も同じ問題がありましたが、URLバーの高さを直接計算する簡単な方法はないことがわかりました。私の知る限り、JavaScriptで直接アクセスできる変数はどれも、「100vh」のサイズが実際にどれだけあるかを示すことができません。

モバイルブラウザーでは、ロード中にブラウザーの表示されるコンテンツ領域の正確な高さにdivのサイズを設定する場合、100vhにURLバーの高さが含まれる場合と含まれない場合があります。

私はそれが私にはかなりきちんと働いたが、ここで私がしたことは次のとおりです：

  1. 100vhのサイズのダミープロパティをHTMLルート要素に追加します。私の場合、私は「視点」属性を使用しました

  2. その後、次のコードでアドレスバーのサイズを取得できます。

    var addressBarSize = parseFloat(getComputedStyle(document.documentElement).perspective) - document.documentElement.clientHeight
0
Qiong Wu

私は常にビューポートの完全な高さを常に持っていなければならない（そしてコンテンツが画面に収まらない場合はスクロール可能である）動的コンテンツを含むコンテナを持っていました。

したがって、固定の高さが必要な場合は、私のソリューションで「min-height」を「height」に置き換えてください。

それが私がそれに対処した方法です。

// calculate min-height on init
$(".content-container").css("min-height", `${window.innerHeight}px`);

// recalculate the min-height everytime the bar appears or disappears
$(window).resize(() => {
    $(".content-container").css("min-height", `${window.innerHeight}px`);
});

これは、AndroidのアドレスバーとSafariのバーで機能します（Safariモバイルでは、トップバーとボトムバーも使用できます）。

次に、移行をスムーズにするために、CSSルールを適用できます。

.content-container{
    transition: min-height 500ms ease;
}
0
Filip Marzec