iOSが悪いってことでいいんでしょうかね。
幅はそれほど問題でない
100vwを使うとスマホはいいけどPCから閲覧した際はスクロールバーを勘定に入れないから表示領域よりちょっと広めになってしまうので、決め打ちすると都合が悪くなる。PCからの閲覧を考慮しない場合に使うのがいい。というか100%でやっとくのが無難。
％は親に影響されるから、幅がブラウザより狭いところで子要素がぶち抜かなきゃいけない状況になったら使うとか？
これを読め
もう何年越しになるか分からないけど、colissの記事は本当にわかりやすくて助かる。
CSSの新しい単位（lvh, svh, dvh)がすべてのブラウザでサポート、100vhがビューポートの高さいっぱいにならない問題を解決
Safari, FirefoxでサポートされていたCSSの新しいビューポート単位「lvh」「svh」「dvh」などが、ついにChromeでもサポートされました！ CSSの新機能で、Chromeが一番最
coliss.com
vhはブラウザの高さを引っ張る。SPも同様に引っ張ってくるんだけど、開始位置がブラウザのアドレスバーとかのアレで位置がずれるんで、閲覧時にはちょっとはみ出してんだけど、みたいな感じになる。だるい。
で、単位にバリエーションができたので色々できるようになったけど注意点がある。
dvhは動的な単位
100dvhだと表示領域いっぱいにしてくれる。バーが出たらその分を削るし、引っ込んだら増える。
ここで気をつけたいのが、ファーストビューを画面いっぱいにするデザインをやりたい場合。
読み込み～表示はいいんだけど、スクロールしたらバーが引っ込んで高さが変わる（100dvhが伸びる）。で、画面がガクッとずれる。上にスクロールしたらバーが出てきてまた高さが変わる（100dvhが縮む）ので、また画面がずれる。バーが出たり引っ込んだりするたびに動くので非常に見づらい、扱いづらいことになる。
どこで使うべきか
あんまりないんじゃないのって思ったり。
とりあえず、バーが動く内容に含めて使うのはよろしくないので、それ以外ということ。
とはいえposition:fixed;は100%でいいし、どこがいいんですかね。
色々ある
使い道が無さそうでも選択肢が持てるのはとても良いことなので、
新しいビューポートの単位（sv*、lv*、dv*） | フロントエンドBlog | ミツエーリンクス
ミツエーリンクスでは全社的にInterop 2022の重点分野について調査をしています。 今回はその中から「新しいビューポートの単位」について紹介します。 ...
www.mitsue.co.jp
コメント