デュアルスクリーンの 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 は、ブラウザーと同様のデュアルスクリーン レイアウトの機能とツールをサポートします。

その他のリソース

• Microsoft Edge ブログ
• Surface Duo 開発者ブログ

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

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