デバイスの縦幅をCSSに反映したい

Question

スマホサイトのcss/js対応についてです。

スマホサイトのレイアウトを調整する際、iPhone6とiPhone8では同じ横幅375pxなのに
高さが大きく異なっています（667pxと812px）。
特にメインビジュアルを作るときは、要素の位置を画面に合わせて細部まで調整したいのですが
横幅が同じなばかりにメディアクエリで切り分けることができません。

今のところ、デバイスの縦幅をjsで取得して切り分けるのが第一の選択肢です。
https://wemo.tech/470

他の皆さんはどのような手法を取っていらっしゃいますか？
もし別の手法があればぜひ参考にしたく、今回投稿させていただきました。

Answer 1

垂直位置関係のレイアウトは vh を単位にして決めるとか。

Comments

[houre]

参考になります。ありがとうございます！

Answer 2

メディアクエリはheightとかaspect-ratioも使えますよ。

【メディアクエリの使用 - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries

Comments

[houre]

恥ずかしながら目から鱗でした。聞いて本当によかったです。ありがとうございます！