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

Angular apps for dual-screen devices

Angular apps for dual-screen devices

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. We'll explore how we can adapt existing apps for these new foldable devices, while trying to avoid dealing with the quirkyness of new CSS and JavaScript primitives.

Yohan Lasorsa

June 30, 2021
Tweet

More Decks by Yohan Lasorsa

Other Decks in Programming

Transcript

  1. Angular apps for dual-screen devices with ngx-foldable | | Yohan

    Lasorsa Yohan Lasorsa | | @sinedied @sinedied
  2. Who am I? Yohan Lasorsa [ Cloud Developer Advocate ]

    Web tech geek, OSS maintainer, DIY lover {   } @sinedied
  3. So, media queries it is! @media (screen-spanning: single-fold-vertical) { ...

    } @media (screen-spanning: single-fold-horizontal) { ... } @sinedied aka.ms/foldable/css-primitives aka.ms/docs/css-primitives
  4. Window Segments API const screenSegments = window.getWindowSegments(); 👆 But that

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

    => null || DOMRect[] if (screenSegments.length > 1) { // It's a foldable device ! } @sinedied aka.ms/foldable/window-segments aka.ms/docs/window-segments
  6. 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 aka.ms/foldable/window-segments aka.ms/docs/window-segments
  7. 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 aka.ms/foldable/window-segments aka.ms/docs/window-segments
  8. 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
  9. 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
  10. Current status Feature Implementation Polyfill CSS Spanning ✅ 🧪 ✅

    Window Segments ✅ 🧪 ✅ Device Posture ⛔ ✅ ✋ CSS Viewport Window Segments ⛔ ⛔ @sinedied
  11. const end = { message: 'Thank you!', slides : 'bit.ly/ngx-foldable',

    links : 'aka.ms/ngx-foldable' }; alert('Questions?'); {    } @sinedied