{"id":699,"date":"2020-09-03T14:17:19","date_gmt":"2020-09-03T21:17:19","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/surface-duo\/?p=699"},"modified":"2020-09-24T10:20:45","modified_gmt":"2020-09-24T17:20:45","slug":"build-and-test-dual-screen-web-apps","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/surface-duo\/build-and-test-dual-screen-web-apps\/","title":{"rendered":"Build and test dual-screen web apps"},"content":{"rendered":"

\n Hello dual-screen web developers!\n<\/p>\n

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

In this post, I\u2019ll briefly cover the new APIs and explain how to enable the dual-screen support so you can start building adaptive dual-screen web experiences today!\n<\/p>\n

Dual-screen web APIs<\/h2>\n

\n Here are some simple examples of the new dual-screen capabilities below:\n<\/p>\n

CSS<\/h3>\n

You can use @media (screen-spanning)<\/code> to apply styles only when the web browser is spanned:<\/p>\n

@media (screen-spanning: single-fold-vertical) {\t\r\n   \/\/ styles applied in double-portrait (wide) mode\r\n}\r\n@media (screen-spanning: single-fold-horizontal) {\t\r\n   \/\/ styles applied in double-landscape (tall) mode\r\n}<\/pre>\n
New environment variables (fold-top<\/code>, fold-left<\/code>, fold-width<\/code>, fold-height<\/code>) are also available, to layout elements around the hinge:<\/p>\n
@media (screen-spanning: single-fold-vertical) {\t\r\n    .blue {\r\n        width: 100px;\r\n        left: calc(env(fold-left) - 100px);\r\n        background-color: blue;\r\n    }\r\n}<\/pre>\n
JavaScript<\/h3>\n
const screenSegments = window.getWindowSegments();\r\nif( screenSegments.length > 1 ) {\r\n   \/\/ now we know the device is a foldable\r\n   \/\/ it's recommended to test whether screenSegments[0].width === screenSegments[1].width\r\n   \/\/ and we can update CSS classes in our layout as appropriate \r\n   document.body.classList.add('is-foldable');\r\n   \/\/ other changes as required for layout\r\n}<\/pre>\n
\n  Read the dual-screen web developer documentation<\/a> for more details on how to use these new capabilities. The CSS and JavaScript enhancements are still in preview, so you’ll need to configure your browser (on the Surface Duo emulator, or on the desktop) to utilize them. To unlock these features to build and test your dual-screen ideas, follow the instructions below.\n<\/p>\n
Test on the Microsoft Surface Duo emulator<\/h2>\n
\n  Today we released a new version of the Surface Duo emulator with support for dual-screen web development.<\/p>\n
To get started, download and install the new Surface Duo emulator preview<\/a> (version 2020.806.1 or newer), then follow these steps to enable the dual-screen enhancements:\n<\/p>\n
    \n
  1. \n  Open Microsoft<\/strong> Edge<\/strong> on the Surface Duo emulator\n<\/li>\n
  2. \n  Type edge:\/\/flags<\/strong> in the address bar\n<\/li>\n
  3. \n  Enable Experimental Web Platform features<\/strong> and restart the browser\n  
    \n  \"Surface\nFigure 1: Screenshot of Surface Duo emulator showing Experimental Web Platform features are enabled<\/em>\n<\/li>\n
  4. \n  Once you enable the Experimental Web Platform<\/strong> features in the Surface Duo emulator, dual-screen CSS and JavaScript extensions will then be enabled, which you can test with this example<\/a> on GitHub. On a single screen, the boxes appear next to each other, but when Microsoft Edge is spanned, CSS is used to render around the hinge:\n  
    \n  \"Surface\nFigure 2: Screenshot of Surface Duo emulator in dual-screen mode<\/em>\n<\/li>\n
  5. \n  You can now view dual-screen enabled web content as it will appear on a Surface Duo.\n<\/li>\n<\/ol>\n
    \n  Testing in the emulator will help you better understand how your web app interacts with the on-screen keyboard, for example, which is difficult to test usingthe desktop developer tools.\n<\/p>\n
    Build and test on the desktop<\/h2>\n
    \n  In addition to viewing dual-screen layouts on the Surface Duo emulator, you can also build and test on the desktop with Microsoft Edge or Chrome canary versions.\n<\/p>\n
    \n  The dual-screen emulation feature requires the Canary build of Microsoft<\/strong> Edge<\/strong> (v86.0.593.0 or newer), which you can download from Microsoft Edge Insider<\/a> for Windows or macOS. Follow these steps to begin working with dual-screen websites:\n<\/p>\n
      \n
    1. \n  Download, install, and open Microsoft<\/strong> Edge <\/strong>Canary build\n<\/li>\n
    2. \n  Type edge:\/\/flags<\/strong> in the address bar (type chrome:\/\/flags<\/b> in Chrome)\n<\/li>\n
    3. \n  Enable Experimental Web Platform features<\/strong> (and restart the browser, if required)
      <\/strong>\n  \nFigure 3: Screenshot of Microsoft Edge browser showing Experimental Web Platform features are enabled<\/em>\n<\/li>\n
    4. \n  Navigate to a dual-screen-enhanced website like this example<\/a> on GitHub\n<\/li>\n
    5. \n  Choose the Settings and more<\/strong> menu (ellipsis\u2026) and then More tools > Developer Tools<\/strong>\n<\/li>\n
    6. \n  In the Developer Tools pane, choose the Settings<\/strong> (gear) button and then Experiments<\/strong> and check Emulation: Support dual screen mode<\/strong>
      \nFigure 4: Screenshot of Microsoft Edge browser showing Experiments settings<\/em>\n<\/li>\n
    7. \n  You should be able to select Surface Duo<\/strong> as a target device, and use the \u201cdual-screen\u201d (book-like) icon to toggle between one and two screens.\n  
      \n  \nFigure 5: Screenshot of Microsoft Edge browser showing Surface Duo screen settings<\/em>\n<\/li>\n
    8. \n  You can now use your regular web development workflow to build and test dual-screen web apps.\n<\/li>\n<\/ol>\n
      \n  Now you\u2019re ready to start building and testing apps on the desktop and take advantage of using existing web development tools and debugging experiences.\n<\/p>\n
      Debug on the Surface Duo emulator from the desktop<\/h2>\n
      \n  In addition to building and testing on the Microsoft Edge desktop, you can also connect to the Surface Duo emulator and debug websites from the emulator.\n<\/p>\n
      \n  Follow these instructions below to connect a Surface Duo emulator instance to Microsoft Edge desktop developer tools<\/a>. Remote debugging also works for Android devices<\/a>.\n<\/p>\n
      Examples to try<\/h2>\n
      \n  Once you\u2019ve configured your Microsoft Edge desktop browser or Surface Duo emulator, try these dual-screen demos:\n<\/p>\n