デュアルスクリーンの 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) |