スマホ用ビューポートの値を取得する方法

コード
```### 前提・実現したいこと
### スマートフォンで自作のファイルをサーバーにアップロードし、ChromeやIOSのアドレスバーに関与することなく、画面高さいっぱいに表示させるために、ビューポートの値を取得するjavascriptの記述を実装したい。


ここに質問の内容を詳しく書いてください。
パソコンのChrome検証でレスポンシブ化（iphone8基準）し、サーバーにアップロードし確認したところ、スマホの画面高さいっぱいにはならず上下にスクロールしてしまう状況です。アドレスバーが邪魔をし、100vhが画面高さをはみ出している状況です。


下記のサイトを参考にjavascriptでビューポートの値を取得する　jsを記述したのですが上手く機能しません。

https://coliss.com/articles/build-websites/operation/css/viewport-units-on-mobile.html

HTMLの記述はブートストラップ４を使用し、全てをcontainerで囲み、その高さを100vhにしてあります。

### 発生している問題・エラーメッセージ

エラーメッセージは確認できませんでした。

### 該当のソースコード
下記のサイトがわたしが作成したものです
[https://blog-be-yourself.net/Official%20TIP%20JAR/](https://blog-be-yourself.net/Official%20TIP%20JAR/)


### 試したこと
下記のサイトを参考にjavascriptでビューポートの値を取得する　jsを記述したのですが上手く機能しません。
https://coliss.com/articles/build-websites/operation/css/viewport-units-on-mobile.html

何卒よろしくお願いいたします。

maisumakun

2021/08/11 13:54

「上手く機能しません。」とありますが、具体的に「どうなる」のですか？

be-yourself

2021/08/11 14:12

アップデートしたサイトをChromeなどで閲覧した際、画面縦幅いっぱいに表示されず、Chromeなどのアドレスバー分、下層にスクロールできてしまう状態です。サイトに書いてあるJavaScriptの記述が実装できたならばChromeなどのアドレスバーに左右されることなく画面いっぱい表示されるはずだと思っておりますがご教授頂けたらと思っております。

行動規範の内容に同意します

回答1件

ベストアンサー

参考サイトに合わすとしたら、下記のような修正で高さが合うかもしれません。

html
1<style>
2/* heightを変更 */
3.vh-100 {
4    height: calc(var(--vh, 1vh) * 100);
5}
6</style>
7
8<script>
9//読み込み時に実行
10let vh_ = window.innerHeight * 0.01; //追加
11document.documentElement.style.setProperty('--vh', `${vh_}px`); //追加
12
13// resizeイベントの取得
14window.addEventListener('resize', () => {
15    // あとは上記と同じスクリプトを実行
16    let vh = window.innerHeight * 0.01;
17    document.documentElement.style.setProperty('--vh', `${vh}px`);
18});
19</script>