html、css、js
<div class="fv">
<!-- ここにファーストビューのコンテンツを入れる -->
</div>/* SPでアドレスバー再計算されるので、FVとかに設定したらダメ */
.fv {
min-height: 100vh; /* カスタムプロパティ未対応ブラウザ用のフォールバック */
min-height: calc(var(--vh, 1vh) * 100);
}
/* 再計算しないのはこっち */
.fv {
min-height: 100vh; /* カスタムプロパティ未対応ブラウザ用のフォールバック */
min-height: calc(var(--vh2, 1vh) * 100);
}// sp 100vh
//=====================================================
// リサイズ対応
// 関数定義
function setHeight() {
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
}
// 初期化
setHeight();
// ブラウザのサイズが変更された時・画面の向きを変えた時に再計算する
window.addEventListener('resize', setHeight);
// 1回のみ取得
// 関数定義
function setHeight2() {
const vh2 = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh2', `${vh2}px`);
}
setHeight2();以下に詳しく書かれてる
https://web-dev.tech/front-end/javascript/setting-100vh-with-css-js/
コメントを残す