こんにちは、ナカムラです。
今回はCSSでよく使われるビューポート単位について、検証したいことがあったので書きたいと思います。
100vhを使った時にアドレスバーの分、意図した高さにならない問題がiOS safariであります。
その対応に使えそうなビューポート単位の紹介がこちらの記事になります。
coliss.com
現在は主要ブラウザで対応されています。 caniuse.com
高さについてにばかり注目していましたが、幅にも使えるのでは？
というのも、幅に100vwを使うとWindows環境ではスクロールバーの幅も含めてしまうため、横スクロールが発生する問題があります。
単位を変えるだけで解決できるならありがたいものです。
DEMO
100%、100vw、100lvw、100svw、100dvwの要素を入れました。
See the Pen Untitled by Nakamura (@takayo-nakamura) on CodePen.
コメントアウトなどで一つずつ表示させてみても結果は同じで、どれも横スクロールが発生します。
スクロールバーの有無はビューポートが変わるわけではないということですね。
ビューポートの概念についてはこちら developer.mozilla.org
それでもvwを使いたい
％でも問題ない時は%を使えば良いですが、2カラムの片方だけウィンドウ幅に合わせて可変するデザイン（写真などを片側幅いっぱいにするなど）だったりすると、親要素に依存する％は使えない場合があります。
※calc関数などを使ってmarginの付け方を左右で分ける方法などもありますが、コンテンツ幅をつけたcontainerクラスなど、できるだけ汎用クラスを使いたいのでvwが使えるととても助かります。
それを解決するには、下記の記事で紹介されている方法があります。
www.6666666.jp
iOS safariで起きていた100vhの問題をjavascriptで解決する方法のvw版になります。
document.documentElement.clientWidthで幅を取得し、1vwに相当するpx数をルートに変数として持たせる手法になります。
あとはCSSで変数を使った書き方にすればWindowsでもスクロール幅に影響されません。
width: calc( var(--vw) * 50 );
最後に
macと同じく上に重なる形のスクロールにしてしまうというのも方法としてはあるかと思います。
デフォルトの状態に慣れているユーザーからすると使いにくくなるので、できるだけ表示領域内でできることで解決したいです。
