2画面折りたたみデバイスに対応したCSSメディアクエリ - Qiita@media (horizontal-viewport-segments: <count>) { } @media (vertical-viewport-segments: <count>) { } <count>は水平(横長)、または垂直(縦長)の画面デバイス数を設定します。 例えば Surface Duo の2画面デバイス表示では以下の値になります。 水平の場合 horizontal-viewport-segments: 2 垂直の場合 vertical-viewport-segments: 2 CSS環境変数 各ビューポートのプロパティは、次の環境変数定義で取得できます。 env(viewport-segment-width <x> <y>); env(viewport-segment-height <x> <y>); env(viewport-segment-top <x> <y>
