web-dev-qa-db-ja.com

WebアプリのモバイルSafariで表示可能な領域の高さ（つまり、ウィンドウの高さからアドレスとブックマークバーを引いたもの）を計算する方法は？

モバイルSafariで利用可能な表示可能スペースを計算する正しい方法は何ですか？表示領域とは、W​​ebアプリが実際に利用できる画面の量を意味します。つまり、ウィンドウの高さからアドレスバーとブックマークバーを差し引いたものです。

iOS 7はアドレスバーの非表示を防止し、ビューポートの高さを適切に考慮する必要があります。

iphoneiossafarimobile-safariios7
19
Crashalot

window.innerWidthおよびwindow.innerHeightはビューポートの幅と高さを示します。

18
neilco

私はこれが5歳の投稿であることを知っていますが、私が知ることができるように、この問題はまだ続きます。私の回避策：CSSでスタイル設定されているページでHTML要素を使用します：_.el{ height:100vh; }_ jQueryを使用してJavaScriptにピクセル単位で高さを取得します：$('.el').height();

このような要素を実際に使用していない場合は、ビューポートを測定することのみを目的として、その場で作成することができます。

_var vh = $('<div style="height:100vh"></div>"').appendTo('body').height();
$('body div:last-child').remove();
_
1
23b

ルートコンテナー要素のCSS height（rootElementとしましょう）をビューポートの高さに設定します。

.root-element {
  height: 100vh;
}

次に、ページがレンダリングされたら、このコードを実行してrootElement高さをビューポートの高さからブラウザーのUIバーのサイズを差し引いたものに更新します（たとえば、iOS Safariでは、上部のアドレスバー、下部のナビゲーションバー…）。 ：

const rootElement = document.querySelector(".root-element")
const viewPortH = rootElement.getBoundingClientRect().height;
const windowH = window.innerHeight;
const browserUiBarsH = viewPortH - windowH;
rootElement.style.height = `calc(100vh - ${browserUiBarsH}px)`;

このソリューションは、ルートコンテナーのサイズを使用可能なサイズに設定しますが、ウィンドウのサイズが変更されたときに（例えば、デスクトップで使用した場合）ブラウザーがrootElementの高さを調整する可能性も維持します。

0
MonsieurDart