スマホでツールバーやアドレスバーに隠れないように全画面表示させるCSS

TIPS 0 Takuya Kobayashi

スマホでツールバーに隠れないように全画面表示させるには

html,bodyにheight:100%を指定し、全画面させる要素にheight:100%を指定して継承させます。これならツールバーやアドレスバーの高さは除外され、ファーストビューで全画面表示になります。

html,body { height:100%; }
#visual { height:100%; }

PCもスマホも全画面表示になるのでこちらの方法で決定でしょう。IE7時代のハックもバカになりませんね。

追記

html,bodyにheight:100%を指定しておくと、position:stickyでビューポート以降追従しなくなってしまいます。

--
以上