[CSS] 100vh使わず100dvh使う話

もう、何も考えなくていいから、"100vh"と言うCSSを書くのをやめなさい。 全ての"100vh"を"100dvh"にすればいいだけだから。 そして、これは、何を隠そうiPhoneのsafariブラウザのためだけの設定です。 こういうcssの仕様を無視したデバイス特有の仕様は本当にやめてもらいたいんだけど、 世の中のiPhone需要を考えるとまあ、これを自己ルール化しておくことで、当面は何の問題もないはずなので、コレでいくことにしたし、 世の中の"100vh"を書いているCSSコーダーで、このことを知らない人に対して、強く教えてあげたい。

cssの単位について

元々、"px" か "%" だけを書いておけばよかったCSSの単位も今や、

vw , vh, em , rem , lh , cap , cqw , cqh , ex , vmax , vmin , vb , vi , cm , cp ...

参考 : https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Values/length もっともっとたくさんあって、どれを使えばいいか迷っている人も多いんじゃないでしょうか？ それとも、意味がわからず使いこなせない人も少なくないはず。 心配しなくて大丈夫です。 全部知る必要はありません。 使うのは、ほんの数種類だけで大丈夫です。 ただ、深掘りをすることで、技術幅は広がるので、興味がある人だけ、どの値がどういう意味があるのか調べてみるといいでしょう。

vhとdvh

vh View Height の略で、ブラウザアプリの縦幅全体でのサイズで、 fixedのモーダルや、レイヤー式のLoading画面表示などで使われます。 dvh Dynamic View Heightの略で、iPhoneのアドレスバーが表示されている時にそれを除外た値が取得できます。 iPhoneで100vhを指定すると、アドレスバーも含めた縦サイズで表示されるので、中心表示をしようとすると、少し下にズレた見た目になってしまいます。 そのため、100dvhを指定するだけで、中心表示にすることができるため、もはや何も考えずに、100dvh一択でセットするのがいいと思ったワケですよ。

iPhoneの設定で変わる縦サイズ

iPhoneの縦サイズの話に注力してますが、実は、コレ、100vhと記述していても、ズレる人とズレない人がいるんですよ。 「設定」 - 「アプリ」 - 「Safari」のアプリ設定で、この画面の「コンパクト」になっている場合は、dvhはvhと同じ値になり、それ以外「下」や「上」になっている場合は、アドレスバーサイズ問題が発生します。 ホントこれ、コンパクトのままデバッグしたら、検証時に指摘が来ること間違い無いですからね。コーダーの人、気をつけて！

あとがき

実際に仕事で発生した、指摘事項をそのままブログに書き認めておきました。 すでにこの事象、まあまあ何年も前から問題になっていて、継承するブログを書いている人も何人も見かけましたが、今の時点では、必須設定ということで、改めて自分ルールに認定したので、ブログ記述することにしました。 未来のことはわかりませんが、今後このアドレスバー問題以外に、ブラウザの仕様が大きく変わることで、CSSに新たな機能が追加されることも十分に考えられますが、 少なくても、下位互換は持たせて欲しいと切に願う、１エンジニアの主張でもありました。 でも、こういうのをチマチマと調べて対応しているのも意外と好きな作業だったりするんですよね。個人的に・・・