iOS版Chrome対<style>高さ：100vh;</style>

Question

iOS用Chromeは、ユーザーがスクロールアップするとアドレスバーを非表示にします。この機能は100vh（またはvhユニット）ではうまく機能しません。ツールバーが縮小すると、ビューポートの高さが変化し、要素のサイズが変化するからです。私は100vhの表紙画像を持っており、ページ全体の長さが増減するにつれて非常に目立つジッタが生じます。

いずれの高さもvhで設定されていると問題があると思います。

私はカバーイメージの高さを設定するためにjavascriptを使用できますが、vhを使用することをお勧めします。

賢いアイデアはありますか？

Answer 1

私が代わりに100VHの100％を使用してお勧めします - あなたはこれを追加することができます...

body{ 
position: absolute; 
width: 100%; 
height: 100%; 
margin: 0; 
} 

そこから、独自の高さを持つ別のラッパーのない任意の要素は、フルスクリーンを埋めることができるようになります100％で幅と高さを使用するだけです。以下の例！

https://codepen.io/will0220/pen/KXqoGZ