Doppelbildschirm-WebumgebungenDual-screen web experiences

Wichtig

In diesem Artikel werden Funktionen und Anleitungen beschrieben, die sich in der öffentlichen Vorschau befinden und vor der allgemeinen Verfügbarkeit noch wesentlich geändert werden können.This article describes functionality and guidance that is in public preview and may be substantially modified before it's generally available. Microsoft übernimmt keine Garantie, weder ausdrücklich noch stillschweigend, für die hier bereitgestellten Informationen.Microsoft makes no warranties, express or implied, with respect to the information provided here.

Der auf Chromium aufsetzende Browser Microsoft Edge bietet eine leistungsstarke und kompatible Grundlage für die Darstellung von Websites und Web-Apps auf verschiedenen Geräten.Microsoft Edge, powered by Chromium, provides a powerful and compatible foundation for website and web app experiences across devices. Dazu gehört auch die neue Doppelbildschirm-Unterstützung beim Ausführen auf dem Surface Duo.This includes new dual-screen support when running on the Surface Duo.

  • Neue Webstandards für das Layout mit Doppelbildschirm: Sie können CSS-Primitive für Doppelbildschirm-Layouts oder die JavaScript-API „Window Segments Enumeration“ verwenden, um mehrere Anzeigen zu erkennen und Webinhalte in diesen Layouts anzuordnen.New web standards for dual-screen layout: You can use CSS primitives for dual-screen layouts or the JavaScript Window Segments Enumeration API to detect multiple displays and lay out web content across them.

  • Testen auf Surface Duo oder einem Emulator: Während sich die neuen Webstandards in der Vorschau befinden, befolgen Sie diese Anweisungen, um die Doppelbildschirm-Unterstützung auf einem Surface Duo oder im Emulator zu aktivieren.Testing on Surface Duo or an emulator: While the new web standards are in preview, follow these instructions to enable dual-screen support on a Surface Duo or in the emulator.

  • Erstellen und Testen auf dem Desktop- : Sie können Doppelbildschirm-Webumgebungen auch auf dem Desktop mit Edge oder Chrome erstellen und testen.Building and testing on the Desktop: You can also build and test dual-screen web experiences on the desktop with Edge or Chrome. Befolgen Sie diese Anweisungen zum Aktivieren der Doppelbildschirm-Entwicklertools.Follow these instructions to enable the dual-screen developer tools.

  • Progressive Web Apps (PWAs) : PWAs werden in der neuen Microsoft Edge-Version standardmäßig unterstützt. Sie können unter Android direkt im Browser installiert werden.Progressive Web Apps: PWAs are supported out of the box in the new Microsoft Edge, which can be installed directly from the browser on Android. PWAs unterstützen die gleichen Features und Tools des Layouts für Doppelbildschirme wie der Browser.PWAs will support the same dual-screen layout features and tools as the browser.

Zusätzliche RessourcenAdditional resources

In Einführung in Doppelbildschirmgeräte stellen wir verschiedene Möglichkeiten vor, wie du vorhandene Features und Techniken nutzen kannst, um deine App auf Geräten mit Doppelbildschirm besser zu gestalten.In Introduction to dual-screen devices, we outline several ways you can use existing features and techniques to make your app better on dual-screen devices. In dieser vorhandenen Dokumentation erfährst du mehr über die Implementierung dieser Features in Web-Apps.Use this existing documentation to learn more about implementing these features in web apps.

FeatureFeature Weitere InformationenFor more info, see...
Layouts dynamischer AppsResponsive app layouts Die Bausteine des dynamischen Designs (Mozilla)The building blocks of responsive design (Mozilla)
Unterstützung verschiedener EingabenSupport a variety of inputs PointerEvent (Mozilla)PointerEvent (Mozilla)
Drag & DropDrag-and-drop HTML-Drag & Drop-API- (Mozilla)HTML Drag and Drop API (Mozilla)
Bild-in-Bild für MedienPicture-in-picture for media Bild-in-Bild (W3C)Picture-in-Picture (W3C)
Bild-in-Bild-Beispiel (Chrome)Picture-in-picture sample (Chrome)