スマホとPCでいい感じに全画面表示したい

Webのレスポンシブデザインでページトップを全画面表示、その下に通常の要素を重ねていこうとしたのですが、vh100やinnerHeightだとURLバーの分飛び出したり出さなかったりでいい感じになりませんでした。absoluteとレスポンシブがそもそも相性悪い
逆にURLバーの影響を受けないようにするとPCのウィンドウサイズ変更に対応できないという・・・
てな訳で、スマホのURLバーの動きに影響を受けず、ウィンドウサイズ変更で適切に高さが設定されるやつを作りました。
ライブラリを使わずに簡単に実現したかったので割切り感はありますが・・・

実現したいイメージ

常時ピンクの部分の高さがイメージの状態で維持されるようにしたい

作ったもの

今回作成したものは以下です。

//JSのコード
const setInitVh = () => {
const InitVh = document.getElementsByTagName('html')[0].clientHeight * 0.01;
document.documentElement.style.setProperty('--initVh', `${InitVh}px`);
}
// 初期化
setInitVh();

// 画面のサイズ変動があった時に高さを再計算する
window.addEventListener('resize', setInitVh);
/*CSSのコード*/
html{
  height : 100%;
}
#targetElm{
  height : calc(var(--initVh, 1vh) * 100);
}

ここにたどり着いた方なら似たようなコードを何度も目にされていると思います。
やっていることはwindow.innerHeightで表示領域の高さを取得する代わりに、htmlタグの高さを100%にし、それを取得して任意の要素で使いまわしています。
これだと今のところアドレスバーの動きに影響を受けず、スマホだとURLバーが動いても初期表示時の高さから変わらず、ウィンドウサイズを変更すると高さが変わる挙動になります。

気になっている点はAndroidで上手くURLバーが隠れた状態を維持しながらページトップに移動すると微妙にURLバー分全画面表示が足りない点です。(普通そんな事しないと思うけど)
常時いい感じにトップが全画面になるようにしたいけどinnerHeightを使うとサイズ変更がカクついて気持ち悪い

できること

  • URLバーが引っ込んでも高さが維持される(URLバーの影響受けない)
  • PCではウィンドウサイズ変更(スマホは横持ち等)で高さがリサイズされる

コメント

タイトルとURLをコピーしました