携帯端末で100vhが実際の可視部分よりも大きい

私はブラウザウィンドウ全体の可視部分をカバーする必要がありますが、100vhを使用すると一部のデバイスや一部のモバイルブラウザで問題が発生しました。まずは、Safariのブラウザのurlセクションでトップ部分を非表示にします。第2に、Chromeの一部のAndroid搭載端末で同じ問題が発生しています。携帯端末で100vhが実際の可視部分よりも大きい

はどのようにこれらの事を考慮するには？

出典

2017-03-16 Alexander Shpindler

ユーザーがページとやりとりすると、通常、URLバーは消えませんか？ //純粋なCSSを使用しているときにこれが既に「正しく」計算されていない場合は、JavaScriptでこれを修正しようとする試みが成功する可能性があります。同じ問題があります。エラー "です。 – CBroe

@CBroeいいえ、隠されていると、常に隠されています。 –

これは、関連するプロパティのいずれかがこのケースを検出することができるかどうか試してみることができると思います。画面の高さとウィンドウの高さなど – CBroe

解決策の1つは、高さをwindow.innerHeightとして設定し、画面リサイズ時にこれらのイベントリスナーで高さを補正することです。

chat.style.height = window.innerHeight + "px"; 

window.addEventListener("orientationchange", e => { 
    if (document.body.offsetWidth < 768) chat.style.height = window.innerHeight + "px"; 
}, false); 

window.addEventListener("resize", e => { 
    if (document.body.offsetWidth < 768) chat.style.height = window.innerHeight + "px"; 
}, false);

これは機能します。

出典

2017-03-16 15:28:38

携帯端末で100vhが実際の可視部分よりも大きい

答えて

関連する問題