デュアルスクリーン Web サンプル

Microsoft Edge 97 以降の Surface Duo でこれらのサンプルをお試しください。 手順に従って 、Edge (または Chrome) の開発者ツール を使用して、デスクトップ ブラウザーでデュアル画面ビューをシミュレートすることもできます。

単純なボックスのデモ

この簡単な例では、環境変数を使用して、Web ブラウザーがスパンされているときにヒンジの周りにボックスをレイアウトします。

フォト ギャラリー

この例は、単一画面でライトボックス効果を使用するが、Web ブラウザーがスパンされている場合に 2 つの画面を利用するフォト ギャラリー アプリを示しています。

レシピ ビュー

CSS を使用した美しいデュアルスクリーン レシピ レイアウト。