スマホブラウザの縦幅がheight:100%ではうまく表示できない。

Question

レスポンシブデザインの練習のために、以下のようなサイトを作成しています。
このサイト。(クリック数を世界と競うアプリ)

PC上でテストしていた時はうまく行っていたのですが、
スマホのブラウザで開くと、ブラウザ固有に上下のUIのせいで縦幅の取得がHeight100%ではうまく取得できませんでした。
ピッタリとどのブラウザでも縦幅を取得するためにはどうしたら良いのでしょうか？

(自分なりに調べましたがどのサイトも横幅の話ばかりでした。。。)

Comments

[kai0310]

この問題が再現できるコードを提示してください。

Answer 1

「CSS スマホのブラウザ 高さ」をキーワードにWEB検索してみましょう。

CSS スマホのブラウザ 高さ - Google 検索

いろいろ解説、解決法がでてきます。
JSを使うことになりそうです。

Answer 2

単位を%ではなくvhを使用するといかがですか？
https://dev.classmethod.jp/articles/css-length-viewport/