折りたたみスマートフォンやSurface Duoのようなデュアルスクリーンデバイスは、通常のレスポンシブデザインでは解決できないレイアウトの問題を提示する。ブラウザのウィンドウは、ヒンジや折り目で分離した二つの物理的に別個のディスプレイをまたぐことができる。連続した長方形用にレイアウトされたページは、内容がシームの向こうで不自然に分かれたり、ヒンジの裏に隠れたりする可能性がある。
二つのCSS機能が、ページにその状況を検知し、適応させます。最初は一組のメディアクエリです。
@media (horizontal-viewport-segments: 2) { /* held like a book, two screens side by side */ } @media (vertical-viewport-segments: 2) { /* stacked like a laptop, fold horizontal */ }
`horizontal-viewport-segments`は、ヒンジが垂直で二つのスクリーンが横に並ぶ場合にデバイスに一致させ、`vertical-viewport-segments`は、ヒンジが水平でスクリーンが積み重なる場合に一致します。整数値はその方向に存在するビューポートの数を報告するため、ページは正確に二つのスクリーンの姿勢を対象にできます。
記は、6つのCSS環境変数——viewport-segment-width、height、top、left、bottom、right——を紹介し、レイアウトがあらかじめ固定されたブレイクポイントを書くことなく、各折りたたみモデルの特定のヒンジとスクリーン寸法に適応できるようにします。
二つ目の機能は、各スクリーンセグメントの幾何形状を報告する一組のCSS環境変数です。
env(viewport-segment-width 0 0); env(viewport-segment-height 0 0); env(viewport-segment-top 0 0); env(viewport-segment-left 0 0); env(viewport-segment-bottom 0 0); env(viewport-segment-right 0 0);
二つの座標は、セグメントを分離するハードウェア機能によって作られたグリッドを表し、0,0は左上セグメントに位置します。これらの値はデバイスによって計算されるため、設計者が各デバイスごとに別途ブレイクポイントを書くことなく、レイアウトは各モデルの特定のスクリーンとヒンジ寸法に適応します。
スティマックは、デュアルスクリーンデバイスで二列グリッドになるレシピページでこのアプローチを実演しています。
@media (horizontal-viewport-segments: 2) { .container { grid-template-columns: env(viewport-segment-width 0 0), 1fr; } }
最初のグリッド列は左側のディスプレイを埋め、二つ目の列は右側の残り空間を取得します。同じルールは、二つのセグメント幅を明示的に名前付けることで、より明確に書くことができ、各列が一つのディスプレイに対応します。
環境変数は、内容がヒンジに落ちるのを防ぐ代わりに、二つのスクリーン間で意図的に配置することも可能にします。この仕事のSmashing Magazine版では、スティマックは、初期のバージョンでテキストがデバイス自体によって隠れていたレイアウトを詳細にわたって説明します。マージンとパディングをリセットし、その後セグメントごとに再適用することで、内容が一切隠れない分割レイアウトが生成されます。
関連する懸念は、対話的要素がシーム上に位置するかどうかです。セグメントの幾何形状は測定可能なので、設計者は運に頼るのではなく、ボタンやタップターゲットをヒンジゾーンから外すことができます。これは、解決済みのハードウェア問題ではなく、意図的な配置の問題です。
JavaScriptは、Visual Viewport API経由で並行的なパスを提供します。`window.visualViewport.segments`をクエリすると、各セグメントのDOMRectの配列、または単一スクリーンレイアウトの場合は`null`が返されます。これはコードが誤って単一スクリーンデバイスを対象にするのを防ぐ意図的な設計です。返された値は不変のスナップショットなので、サイズ変更や回転の後、現在の状態を取得するためには、ページがセグメントを再クエリする必要があります。
記者が提起する実質的な質問は、これらのレイアウトを構築する方法だけでなく、「するかどうか」です。スティマックは懐疑論を認nez: 多くの開発者而言、この努力はごく一部のユーザーを対象するものと見なす。彼女の反論は、2023年に2100万台以上が出荷されるという予測に基づいています。これは全体のモバイル市場に比して小さいが、使用中のデバイスが何百万台も存在する——そしてGoogleのPixel Foldの登場は、このフォームファクタが実騦的ではなく持続的なものであることを示していると彼女は主張します。
二つ目の論点は差別化です: 折りたたみに適応するサイトは、競合の標準的なレスポンシブレイアウトがしないことをします。彼女は、工数を投入する前に、顧客が実際に持っているデバイスに関するデータを使用することを推奨し、Surface Duoの一つのディスプレイペイン内のブラウザは、普通のレスポンシブサイトを既にレンダリングしていると指摘します——したがって、デュアルスクリーンモードは強化であり、要件ではありません。
ブラウザサポートが最大の障害です。両方のメディアクエリと環境変数は、Microsoft Edge Stableでサポートされています。Chrome Stableはまだこれらを提供しておらず、Pixel FoldはChromeで出荷されるため、この記事は大きな欠如と呼んでいます。
記は、ブラウザとOSのサポートがなければ、企業は折りたたみ体験に投資しないだろうと結び、こうした機能を可能にする作業は、まずブラウザに実装される必要があると締めくくます。より深く知りたい読者向けに、スティマックによる同じレシピデモの長編はSmashing Magazineに掲載されており、実験するためEdgeのダウンロードを推奨しています。
この記事が確立していることは、重要な点で限られています: これは実用的な手法の調査と一家言であり、これらの技術のいずれかを独立して検証するものではありません。Smashing Magazineの記事は同じ著者によって書かれているため、外部の裏付けではなく、彼女自身の明言した立場を反映しています。提供されていないのは、現実のパフォーマンスデータ、どの出版社からの採用数字、または折りたたみ特有のレイアウトがユーザーの測定可能な結果を改善するかどうかの形式的な評価です。