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

  • [アーティクル]

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

Screenshot shows a boxes dual-screen C S S sample.

単純なボックスのデモ

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

Screenshot shows a photo gallery dual-screen sample.

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

Screenshot shows a recipe dual-screen sample.

レシピ ビュー

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