スマホなどデバイスごとにheightサイズ合わせをする

トップページのロゴが下に隠れてしまったりしないように高さをデバイスに合わせて取得する方法。
jsに以下を追加してビューポートの内側の高さを取得する。

let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
setHeight();
//ブラウザのサイズが変更された時・画面の向きを変えた時にvh再計算
window.addEventListener('resize', setHeight);

で目的のボックスに以下のcssを追加する。

.p-top_visual {
  height: 100vh; /* 変数をサポートしていないブラウザのフォールバック */
  height: calc(var(--vh, 1vh) * 100);
}