Tag: web from Surface Duo Blog

Build and deploy dual-screen progressive web apps

Justin Willis April 15, 2021 Apr 15, 2021 04/15/21

Hello web developers, We've posted previously about using dual-screen media queries and JavaScript to adapt web apps for Microsoft Surface Duo. Today’s post is about how you can use those dual-screen capabilities in your progressive web app (PWA) and deploy to both the Google Play Store AND the Microsoft Store using PWABuilder! We...

Adapting your Angular web app for dual-screen devices

Yohan Lasorsa April 1, 2021 Apr 1, 2021 04/1/21

Hello web developers! Foldable and dual-screen devices are becoming increasingly more common over time, but you may wonder if investing development time to support these devices might be worth it, especially when creating fully responsive web apps is already a challenge. Using the new CSS and JavaScript primitives is a fun way to ...

Building dual-screen web experiences with React

Aaron Powell January 21, 2021 Jan 21, 2021 01/21/21

Hello web developers! Responsive design has always been the cornerstone of web development, rather than designing for a single use case, we focus on creating applications that can adjust to the needs of the platform they are running on. Microsoft Surface Duo is no exception to this and in past blog posts we’ve explored how we can use ...

Build dual-screen Cordova apps for Microsoft Surface Duo

Craig Dunn December 17, 2020 Dec 17, 2020 12/17/20

Hello hybrid app developers, This week I’m happy to share an example plugin for use with Cordova that will help to enhance your hybrid apps for dual-screens. The plugin includes DisplayMask.jar to detect the Surface Duo and return information about the masked hinge area when the app is spanned, and exposes it in JavaScript for ...

Adapting your website to support new possibilities of dual-screen devices

Alexis Menard (Intel) October 15, 2020 Oct 15, 2020 10/15/20

Hello there, fellow web developers! In an earlier blog post, we introduced the upcoming CSS @media feature primitives and the getWindowSegments() API for dual-screen and foldable devices. In this blog post, we will look at how Kenneth Rohde Christiansen and myself created and adapted our existing Foldship demo to take ...

Launch your dual-screen enhanced website today with Microsoft Edge Origin Trials

Craig Dunn September 24, 2020 Sep 24, 2020 09/24/20

Hello dual-screen web developers! Earlier this month, we shared details on how you can build dual-screen web apps using the web APIs built-in to Microsoft Edge and Chrome. The Microsoft Edge team followed up with a more detailed explanation of the CSS and JavaScript APIs. These APIs are still in preview and require you to enable ...

Build and test dual-screen web apps

Craig Dunn September 3, 2020 Sep 3, 2020 09/3/20

Hello dual-screen web developers! In a previous blog post, we talked about the dual-screen CSS @media primitives and the getWindowSegments() API, and how they could be tested with polyfill extensions. Now those features are built-in to Microsoft Edge and Chrome™ browser canary builds, ready for developers to begin building dual-...

Dual-screen web experiences preview

Craig Dunn June 11, 2020 Jun 11, 2020 06/11/20

In previous posts, we’ve talked about building Android apps for Microsoft Surface Duo using Kotlin & Java, C# with Xamarin, React Native, Unity, and Flutter. Microsoft is also working hard to bring new capabilities to the web so that websites and embedded web experiences can also adapt to the Surface Duo and other dual-screen devices...

Surface Duo Blog