Chrome test twee API's, de Device Posture API en de Viewport Segments Enumeration API, die beschikbaar zijn als origin-proefversie van Chrome 125. Deze staan gezamenlijk bekend als de Foldable API's, ontworpen om ontwikkelaars te helpen zich te richten op opvouwbare apparaten. In dit bericht worden deze API's geïntroduceerd en wordt informatie gegeven over hoe u kunt beginnen met het testen ervan.
Er zijn hoofdzakelijk twee verschillende fysieke vormfactoren: toestellen met één flexibel scherm (naadloos) en toestellen met twee schermen (met naad, ook wel dual screen toestellen genoemd).
Deze apparaten bieden ontwikkelaars uitdagingen en kansen. Ze bieden extra manieren waarop inhoud kan worden bekeken. Een gebruiker kan bijvoorbeeld een naadloos apparaat zoals een boek vasthouden en dit vervolgens gebruiken als een tablet met een plat scherm. Apparaten met twee schermen hebben een fysieke verbinding tussen de schermen waarmee mogelijk rekening moet worden gehouden.
Deze nieuwe API's bieden ontwikkelaars manieren om betere gebruikerservaringen voor deze apparaten te bieden. Elke API maakt de benodigde webplatformprimitieven op twee manieren zichtbaar: via CSS en JavaScript.
Apparaathouding-API
Opvouwbare apparaten hebben mogelijkheden waarmee ze hun houding of de fysieke staat van het apparaat kunnen veranderen. Ze kunnen hun vormfactor veranderen, waardoor auteurs van inhoud een andere gebruikerservaring kunnen bieden, en deze nieuwe API's zorgen ervoor dat webinhoud kan reageren op de verschillende vouwtoestanden.
Er zijn twee apparaatposities waarin een apparaat zich kan bevinden:
-
folded: Laptop- of boekhoudingen.
-
continuous: platte, tablet- of zelfs naadloos gebogen beeldschermen.
CSS
De Device Posture API-specificatie definieert een nieuwe CSS-mediafunctie: device-posture . Deze mediafunctie leidt tot een reeks vaste houdingen. Deze houdingen bestaan uit een aantal vooraf gedefinieerde waarden die elk een fysieke toestand van het apparaat omvatten.
De waarden van de device-posture komen overeen met de eerdere beschrijving van mogelijke houdingen:
-
folded -
continuous
Er kunnen in de toekomst 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 een nieuw DevicePosture object beschikbaar.
const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);
Als u wilt reageren op veranderingen in de houding van het apparaat, zoals wanneer een gebruiker een apparaat volledig opent en daardoor van folded naar continuous gaat, kunt u zich abonneren op change .
navigator.devicePosture.addEventListener('change', (e) => {
console.log(`The device posture changed to type ${e.type}`);
});
Viewport-segmenten-API
De viewport-segmenten zijn CSS-omgevingsvariabelen die de positie en afmetingen van een logisch gescheiden gebied van de viewport definiëren. Viewport-segmenten worden gemaakt wanneer de viewport wordt gesplitst door een of meer hardwarekenmerken (zoals een vouw of een scharnier tussen afzonderlijke beeldschermen) die als scheidingswand fungeren. Segmenten zijn de gebieden van de viewport die door de auteur als logisch verschillend kunnen worden beschouwd.
CSS
Het aantal logische divisies wordt zichtbaar gemaakt via twee nieuwe mediafuncties, gedefinieerd in de CSS Media Queries Level 5-specificatie: vertical-viewport-segments en horizontal-viewport-segments . Ze worden omgezet in het aantal segmenten waarin de viewport is opgedeeld.
Daarnaast zijn er nieuwe omgevingsvariabelen toegevoegd om de dimensies van elke logische divisie op te vragen. 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 vertegenwoordigen in het tweedimensionale raster dat is 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 inhoudssecties (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 volgende foto's laten zien hoe de ervaring eruit ziet op een fysiek apparaat.
JavaScript
Om het aantal viewport-segmenten te verkrijgen, controleert u de segments in de visualViewport .
const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);
Elke vermelding 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 er een query naar wordt uitgevoerd. Om bijgewerkte waarden te ontvangen, moet u naar houdingsveranderingen luisteren of de grootte van gebeurtenissen wijzigen en de segments opnieuw opvragen.
Probeer de opvouwbare API's
De opvouwbare API's zijn beschikbaar in een origin-proefversie van Chrome 125 tot en met Chrome 128. Zie Aan de slag met origin-proefversies voor achtergrondinformatie over origin-proefversies.
Voor lokaal testen kunnen de opvouwbare API's worden ingeschakeld met de Experimental Web Platform-functiesvlag op chrome://flags/#enable-experimental-web-platform-features . Het kan ook worden ingeschakeld door Chrome vanaf de opdrachtregel uit te voeren met --enable-experimental-web-platform-features .
Demo's
Voor demo's raadpleegt u de demo-repository . Als je geen fysiek apparaat hebt om mee te testen, kun je in Chrome DevTools het Galaxy Z Fold 5- of Asus Zenbook Fold -geëmuleerde apparaat kiezen en schakelen tussen Continu en Folded . Indien van toepassing kunt u ook het scharnier visualiseren.
Gerelateerde links
- Apparaathouding-API
- Viewport-segmenten-API