モバイルCSSの高さ100％+ブラウザのクローム？

Question

モバイルデバイスのビューポートを100％占めるようにしたい。最初は高さと幅を100％に設定しました。

は、しかし、今私は、次のJavaScriptでブラウザクロムを隠しています：

setTimeout(function() { 
window.scrollTo(0, 1) }, 
100); 

結果は、高さがマイナスブラウザクロームの高さが100％であるということです。また、javascriptは、クロムが隠されているページをスクロールダウンするだけで動作し、ページがdiv imより大きい場合にのみ発生します。

どうすればこの問題を回避できますか？デバイス検出を使用し、ブラウザクロームの高さ値をピクセル単位でデバイス単位で追加する唯一の方法はありますか？可能ならこれを避けるのが好きです。ありがとう

Answer 1

私が間違っていない場合、あなたの問題は主にSafari iPhoneに関連しています。

最も簡単な解決策は、設定された間隔ごとにページの高さの変更をチェックし、それに従ってコンテナの高さを変更することです。

このソリューションでは、向きの変更も考慮しています。 私は、それがorientationChangeとscrollイベントに関数を簡単にバインドするのを簡単に最適化できたと確信しています。