Chrome test twee API's: de Device Posture API en de Viewport Segments Enumeration API. Deze zijn beschikbaar als een proefversie vanaf Chrome 125. Deze staan gezamenlijk bekend als de Foldable API's en zijn ontworpen om ontwikkelaars te helpen bij het targeten van opvouwbare apparaten. Dit bericht introduceert deze API's en geeft informatie over hoe u ze kunt testen.
Er zijn hoofdzakelijk twee verschillende fysieke vormfactoren: apparaten met één flexibel scherm (naadloos) en apparaten met twee schermen (met naad, ook wel dual screen-apparaten genoemd).
Deze apparaten bieden ontwikkelaars zowel uitdagingen als kansen. Ze bieden extra manieren om content te bekijken. Een gebruiker kan bijvoorbeeld een naadloos apparaat vasthouden als een boek en het vervolgens gebruiken als een tablet met een plat scherm. Apparaten met twee schermen hebben een fysieke verbinding tussen de schermen, waar mogelijk rekening mee moet worden gehouden.
Deze nieuwe API's bieden ontwikkelaars manieren om een betere gebruikerservaring te bieden voor deze apparaten. Elke API maakt de benodigde primitieven voor het webplatform op twee manieren beschikbaar: via CSS en JavaScript.
API voor apparaathouding
Opvouwbare apparaten hebben mogelijkheden waarmee ze hun houding of de fysieke staat van het apparaat kunnen veranderen. Ze kunnen hun vormfactor veranderen, waardoor contentauteurs een andere gebruikerservaring kunnen bieden. Deze nieuwe API's zorgen er bovendien voor dat webcontent kan reageren op de verschillende vouwtoestanden.
Er zijn twee apparaatposities waarin een apparaat zich kan bevinden:
-
folded: Laptop- of boekhouding.
-
continuous: Platte, tablet- of zelfs naadloos gebogen displays.
CSS
De Device Posture API-specificatie definieert een nieuwe CSS-mediafunctie : device-posture . Deze mediafunctie vertaalt zich naar een set vaste houdingen. Deze houdingen bestaan uit een aantal vooraf gedefinieerde waarden die elk een fysieke status van het apparaat omvatten.
De waarden van de functie device-posture komen overeen met de vorige beschrijving van mogelijke houdingen:
-
folded -
continuous
In de toekomst kunnen er nieuwe houdingen worden toegevoegd als er nieuwe apparaten op de markt komen.
Voorbeelden:
/* Using the device in a 'book' posture. */
@media (device-posture: folded) { ... }
/* Using the device in a 'flat' posture, or any typical device like a laptop or
desktop device. */
@media (device-posture: continuous) { ... }
JavaScript
Om de houding van een apparaat op te vragen, is er een nieuw DevicePosture object beschikbaar.
const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);
Om te reageren op veranderingen in de houding van het apparaat, zoals wanneer een gebruiker het apparaat volledig opent en daardoor van folded naar continuous overgaat, kunt u zich abonneren op change .
navigator.devicePosture.addEventListener('change', (e) => {
console.log(`The device posture changed to type ${e.type}`);
});
Viewport Segmenten API
Viewportsegmenten zijn CSS-omgevingsvariabelen die de positie en afmetingen van een logisch gescheiden deel van de viewport definiëren. Viewportsegmenten worden gemaakt wanneer de viewport wordt gesplitst door een of meer hardwarekenmerken (zoals een vouw of scharnier tussen afzonderlijke schermen) die als scheidingslijn fungeren. Segmenten zijn de delen van de viewport die door de auteur als logisch gescheiden kunnen worden beschouwd.
CSS
Het aantal logische segmenten wordt weergegeven via twee nieuwe mediafuncties, gedefinieerd in de CSS Media Queries Level 5-specificatie: vertical-viewport-segments en horizontal-viewport-segments . Deze worden omgezet naar het aantal segmenten waarin de viewport is opgedeeld.
Daarnaast zijn er nieuwe omgevingsvariabelen toegevoegd om de dimensies van elke logische divisie te bevragen. Deze variabelen zijn:
-
env(viewport-segment-width xy) -
env(viewport-segment-height xy) -
env(viewport-segment-top xy) -
env(viewport-segment-left xy) -
env(viewport-segment-bottom xy) -
env(viewport-segment-right xy)
Elke variabele heeft twee dimensies, die respectievelijk de x- en y-positie in het tweedimensionale raster weergeven dat wordt gecreëerd door de hardwarekenmerken die de segmenten scheiden.
Het volgende codefragment is een vereenvoudigd voorbeeld van het maken van een gesplitste UX, waarbij we twee contentsecties (col1 en col2) aan elke kant van de vouw hebben.
<style>
/* Segments are laid out horizontally. */
@media (horizontal-viewport-segments: 2) {
#segment-css-container {
flex-direction: row;
}
#col1 {
display: flex;
flex: 0 0 env(viewport-segment-right 0 0);
background-color: steelblue;
}
#fold {
width: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
background-color: black;
height: 100%;
}
#col2 {
display: flex;
background-color: green;
}
}
/* Segments are laid out vertically. */
@media (vertical-viewport-segments: 2) {
#segment-css-container {
flex-direction: column;
}
#col1 {
display: flex;
flex: 0 0 env(viewport-segment-bottom 0 0);
background-color: pink;
}
#fold {
width: 100%;
height: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0));
background-color: black;
}
#col2 {
display: flex;
background-color: seagreen;
}
}
</style>
<div id="segment-css-container">
<div id="col1"></div>
<div id="fold"></div>
<div id="col2"></div>
</div>
De onderstaande foto's tonen hoe de ervaring eruitziet op een fysiek apparaat.
JavaScript
Om het aantal viewportsegmenten te achterhalen, controleert u de segments in de visualViewport .
const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);
Elk item in de segments vertegenwoordigt elk logisch segment van de viewport met een DOMArray die de coördinaten en grootte beschrijft. Het segments is een momentopname van de gegeven status wanneer het wordt opgevraagd. Om bijgewerkte waarden te ontvangen, moet u luisteren naar postuurwijzigingen of gebeurtenissen met betrekking tot formaatwijzigingen en de segments opnieuw opvragen.
Probeer de Foldable API's
De Foldable API's zijn beschikbaar in een origin trial van Chrome 125 tot en met Chrome 128. Zie Aan de slag met origin trials voor achtergrondinformatie over origin trials.
Voor lokale tests kunnen de Foldable API's worden ingeschakeld met de vlag 'Experimental Web Platform Features' op chrome://flags/#enable-experimental-web-platform-features . U kunt de functie ook inschakelen door Chrome vanaf de opdrachtregel uit te voeren met --enable-experimental-web-platform-features .
Demo's
Zie de demo-repository voor demo's. Als je geen fysiek apparaat hebt om mee te testen, kun je in Chrome DevTools kiezen voor het geëmuleerde Galaxy Z Fold 5- of Asus Zenbook Fold- apparaat en schakelen tussen Doorlopend en Gevouwen . Je kunt ook het scharnier visualiseren indien van toepassing.
Gerelateerde links
- API voor apparaathouding
- Viewport Segmenten API