デュアルスクリーンの Web エクスペリエンス

Chromium をベースとする Microsoft Edge は、さまざまなデバイスでの Web サイトと Web アプリのエクスペリエンスのために、強力で互換性のある基盤を提供します。 これには、Surface Duo で実行する場合の新しいデュアルスクリーン サポートが含まれます。

  • デュアルスクリーン レイアウト向けの新しい Web 標準: デュアルスクリーン レイアウトのための CSS プリミティブまたは JavaScript ビューポートのセグメント API を使用して、複数のディスプレイを検出し、Web コンテンツをそれらにレイアウトすることができます。

  • Surface Duo またはエミュレーターでのテスト:新しい Web 標準がプレビュー段階にある間は、これらの手順に従って、Surface Duo またはエミュレーターでデュアルスクリーンのサポートを有効にすることができます。

  • デスクトップでのビルドとテスト:デスクトップ上で Microsoft Edge または Chrome を使用して、デュアルスクリーンの Web エクスペリエンスをビルドし、テストすることもできます。 次の手順に従って、デュアルスクリーン開発者ツールを有効にします

  • プログレッシブ Web アプリ:新しい Microsoft Edge では PWA が標準でサポートされており、Android のブラウザーから直接インストールできます。 PWA は、ブラウザーと同様のデュアルスクリーン レイアウトの機能とツールをサポートします。

その他のリソース

デュアルスクリーン デバイスの概要」では、従来の機能とテクニックを使用して、アプリをデュアルスクリーン デバイスに適応させるためのいくつかの方法を概説しています。 このドキュメントを参照して、これらの機能を Web アプリで実装する方法について学んでください。

機能 詳細情報
レスポンシブ アプリ レイアウト レスポンシブ デザインの構成要素 (Mozilla)
さまざまな入力のサポート PointerEvent (Mozilla)
ドラッグ アンド ドロップ HTML ドラッグ & ドロップ API (Mozilla)
メディア向けのピクチャ イン ピクチャ ピクチャ イン ピクチャ (W3C)
ピクチャ イン ピクチャのサンプル (Chrome)