カスタムプロパティでアドレスバーを抜いたvhを実現する

vh vwのウインドウサイズ設定は便利です。
でもvhには問題があって、スマホの場合はvhにアドレスバーやステータスバーの高さを含んでしまうこと。
なのでvh vwをある一定の比や100%設定にした場合には、アドレスバーがコンテンツの頭にかかってきたりする。（これ、仕様としてアホだと思う。改善もとむ）

なので、vw vhでウインドウサイズで一定の比率を設定し、さらに「コンテンツの高さ」をjavascriptで取得してやらないといけません。

やり方は下記の通り

javascript

// --vhというカスタムプロパティを作成
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
// window resize
window.addEventListener('resize', () => {
    vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
});

css(コンテンツ比16:9の場合)

/* 以下、スマホアドレスバー分差し引きカスタムプロパティ */
/* カスタムプロパティ未対応ブラウザ対応 */ 
width: 177.78vh;
 / *100vh --vhが未定義の場合は1vhを使う */
 width: calc(var(--vh, 1vh) * 177.78);
max-width: 100vw;
height: 56.25vw;
 /* カスタムプロパティ未対応ブラウザ対応 */
max-height: 100vh; 
/* 100vh --vhが未定義の場合は1vhを使う */
 max-height: calc(var(--vh, 1vh) * 100);