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
Slide 16
Slide 16 text
Environment variables
@sinedied
Slide 17
Slide 17 text
But... things moves fast
@sinedied
Slide 18
Slide 18 text
@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
Slide 19
Slide 19 text
@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
With new env vars soon: https://github.com/w3c/csswg-drafts/pull/6474/
Slide 20
Slide 20 text
...opening up new possibilities?
@media (horizontal-viewport-segments:2) and @media (vertical-viewport-segments:2);
@sinedied
Slide 21
Slide 21 text
...opening up new possibilities?
@media (horizontal-viewport-segments:2) and @media (vertical-viewport-segments:2);
@sinedied
Slide 22
Slide 22 text
...opening up new possibilities?
@media (horizontal-viewport-segments:2) and @media (vertical-viewport-segments:2);
@sinedied
Slide 23
Slide 23 text
What about the JavaScript side?
@sinedied
Slide 24
Slide 24 text
Window Segments API
const screenSegments = window.getWindowSegments();
@sinedied
aka.ms/foldable/window-segments
aka.ms/docs/window-segments
Slide 25
Slide 25 text
Window Segments API
const screenSegments = window.getWindowSegments();
👆 But that was before community feedback...
@sinedied
aka.ms/foldable/window-segments
aka.ms/docs/window-segments
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
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
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
Slide 30
Slide 30 text
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
Slide 31
Slide 31 text
Device Posture API
navigator.devicePosture.addEventListener("change", () => {
console.log(`The current posture is: ${navigator.devicePosture.type}!`);
})
@sinedied
Slide 32
Slide 32 text
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
Slide 33
Slide 33 text
Demos
@sinedied
Slide 34
Slide 34 text
Setting up for development
@sinedied
Slide 35
Slide 35 text
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
Slide 36
Slide 36 text
Android Surface Duo emulator
aka.ms/foldable/dev-setup
⚠️
Highly recommended!
@sinedied