width: 100vwを避けた方がいい理由と、jQueryでのカスタムプロパティの上書き
vw・vhが登場し、cssのみで画面の幅と高さが取得出来るようになって久しいですが、この２つの値は若干の問題があります。
width: 100vw; は要素の幅をブラウザ幅と同じにする事が出来ますが、100vwはスクロールバーの幅も含まれます。
スクロールバーの幅分要素がはみ出すため、横スクロールが発生してしまいます。
height: 100vh; は要素の高さをブラウザの高さを同じにする事が出来ますが、これはブラウザすべてを含む高さになります。
iOSでサイトを閲覧する場合にアドレスバーやステータスバーの分、要素の高さがはみ出してしまいます。
heightの問題は簡単に解決出来るようで、
.hoge{
height: 100vh;
height: 100dvh;
}これで、アドレスバーがある場合と、無い場合を考慮して要素を画面の高さにする事が出来ます。
幅の場合ですが、カスタムプロパティとjavascript(jQuery)を使った方法を紹介したいと思います。
コードはコチラ↓
/*---------------------------------
style.css
---------------------------------*/
:root{
--vw: 1vw;
}function setVw(){
//--vwをセットする関数
let vw = $(window).width() / 100 + 'px';
//ブラウザ幅/100を取得し変数vwに格納
$(':root').css('--vw', vw);
//:rootのカスタムプロパティ--vwにvwを代入させる。これで、スクロールバーの幅を除いた画面幅/100が--vwになる
}
$(window).on('load resize', function(){
setVw;
});
//画面を、読み込んだ時・サイズを変えた時 → 関数vwが動作するあとは、cssで--vwに数字をかけてやればokです
/*---------------------------------
style.css
---------------------------------*/
.size-100{
width: calc(var(--vw) * 100);
}
.size-50{
width: calc(var(--vw) * 50);
}いかがでしたでしょうか。
vwの方は width: 100%; でもいいのではと思いましたが、ラッパーに内包されている子要素を全画面にしたいと思った時に、この方法なら楽に行えます。
コチラの記事を参考にさせていただきました。