Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Multi-screen experiences for the mobile web

Multi-screen experiences for the mobile web

You have probably seen these new smartphones with foldable screens, like the Samsung Galaxy Fold, or with two screens like the Surface Duo. They're already on the market, so it's up to you to update your applications for these devices! ... 🤔 But how? Where to start ? Fortunately, the web is constantly evolving and has already started adapting to account for these new devices, thanks to new APIs.

In this talk, we'll explore how you can leverage multiple screens to create new user experiences for your web apps, and dive into new experimental web features. We'll also have a look at how we can adapt existing apps for these new devices while trying to avoid dealing with the quirkiness of new CSS and JavaScript primitives.

Yohan Lasorsa

July 02, 2021
Tweet

More Decks by Yohan Lasorsa

Other Decks in Programming

Transcript

  1. Building multi-screen experiences Building multi-screen experiences For the web For

    the web | | Yohan Lasorsa Yohan Lasorsa | | Olivier Leplus Olivier Leplus
  2. Not this one. ( It's older than the web! )

    @sinedied | @olivierleplus
  3. ( Still a bit wrong. This one came before the

    mobile web. ) @sinedied | @olivierleplus
  4. So, media queries it is! @media (screen-spanning: single-fold-vertical) { ...

    } @media (screen-spanning: single-fold-horizontal) { ... } @sinedied | @olivierleplus aka.ms/foldable/css-primitives aka.ms/docs/css-primitives
  5. @media (horizontal-viewport-segments:2) and @media (vertical-viewport-segments:1); @media (horizontal-viewport-segments:1) and @media (vertical-viewport-segments:2);

    New media queries... @sinedied | @olivierleplus With new env vars: https://github.com/w3c/csswg-drafts/pull/6474/
  6. Window Segments API const screenSegments = window.getWindowSegments(); 👆 But that

    was before community feedback... @sinedied | @olivierleplus aka.ms/foldable/window-segments aka.ms/docs/window-segments
  7. Visual Viewport Window Segments API const screenSegments = window.visualViewport.segments; @sinedied

    | @olivierleplus aka.ms/foldable/window-segments aka.ms/docs/window-segments
  8. Visual Viewport Window Segments API const screenSegments = window.visualViewport.segments; //

    => null || DOMRect[] if (screenSegments.length > 1) { // It's a foldable device ! } @sinedied | @olivierleplus aka.ms/foldable/window-segments aka.ms/docs/window-segments
  9. Visual Viewport Window Segments API const screenSegments = window.visualViewport.segments; //

    => null || DOMRect[] if (screenSegments.length > 1) { // It's a foldable device ! for (let i = 0; i < screenSegments.length; i++) { console.log(`Screen segment ${i}:`); console.log('- width : ' + screenSegments[i].width); console.log('- height : ' + screenSegments[i].height); console.log('- x origin: ' + screenSegments[i].x); console.log('- y origin: ' + screenSegments[i].y); } } @sinedied | @olivierleplus aka.ms/foldable/window-segments aka.ms/docs/window-segments
  10. Visual Viewport Window Segments API const screenSegments = window.visualViewport.segments; //

    => null || DOMRect[] if (screenSegments.length > 1) { // It's a foldable device ! for (let i = 0; i < screenSegments.length; i++) { console.log(`Screen segment ${i}:`); console.log('- width : ' + screenSegments[i].width); console.log('- height : ' + screenSegments[i].height); console.log('- x origin: ' + screenSegments[i].x); console.log('- y origin: ' + screenSegments[i].y); } } @sinedied | @olivierleplus aka.ms/foldable/window-segments aka.ms/docs/window-segments
  11. Device Posture API w3.org/TR/device-posture/ Device: single-screen (foldable or not), dual-screen

    Posture: no-fold, laptop, flat, tent, tablet, book @sinedied | @olivierleplus
  12. Device Posture API navigator.devicePosture.addEventListener("change", () => { console.log(`The current posture

    is: ${navigator.devicePosture.type}!`); }) @media (device-posture: laptop) and (screen-spanning: single-fold-horizontal) { /* Where the magic happens! */ } .videocall-controls .videocall-area @sinedied | @olivierleplus
  13. Enable browser dual-screen emulation aka.ms/foldable/dev-setup 1. chrome://flags or edge://flags 2.

    Enable Experimental Web Platform features 3. Open dev tools settings 4. In Experiments tab, tick Emulation: Support dual screen mode @sinedied | @olivierleplus
  14. Current polyfills status Feature Implementation Polyfill CSS Spanning ✅ 🧪

    ✅ Window Segments ✅ 🧪 ✅ Device Posture ⛔ ✅ ✋ CSS Viewport Window Segments ⛔ ⛔ @sinedied | @olivierleplus
  15. const end = { message : 'Thank you!', slides :

    'bit.ly/foldable-dev', links : 'aka.ms/foldable-dev' }; alert('Questions?'); {    } @sinedied | @olivierleplus