Opvouwbare telefoons zijn hier om te blijven: wat webontwikkelaars moeten weten over de nieuwe Device APIs

Laten we eerlijk zijn—opvouwbare telefoons bevinden zich al een paar jaar aan de rand van de techniekwereld. Android-gebruikers leefden al het opvouwbare leven terwijl de rest van ons toekeek vanaf de zijlijn, af en toe kwijlend naar die elegante demos van apparaten. Maar Apple heeft de sprong eindelijk gemaakt, en of u nu bij het iPhone-kamp hoort of niet, deze verschuiving heeft enorme gevolgen voor de gemeenschap van webontwikkelaars.

Als iemand die dit vakgebied nauwlettend volgt (en mogelijk een gênant aantal uren heeft besteed aan spelen met de iPhone Duo-simulator in het weekend), kan ik u vertellen: de web-APIs die deze apparaten ondersteunen zijn verrassend robuust. Apple heeft zes video's gepubliceerd over hoe u apps voor de Duo bouwt, en hoewel een groot deel daarvan neerkomt op native iOS, heeft Apple met een aantal werkelijk coole APIs de deur ruim opengelaten voor webontwikkelaars.

Laten we dus bekijken wat u vandaag al kunt gebruiken.

Device Posture API: inzicht in de vouwstatus

Allereerst de Device Posture API. Deze handige kleine interface laat u weten of uw gebruiker een vlak scherm bekijkt, een opgevouwd scherm of iets daartussenin. Beschouw het als een statusupdate van uw apparaat over zijn fysieke toestand.

In JavaScript kunt u hier toegang toe krijgen via navigator.devicePosture. Dit vertelt u of het scherm continuous is (een normaal vlak scherm) of folded (deels gesloten, zoals een laptop). In CSS is het nog overzichtelijker met de device-posture-mediaquery:

@media (device-posture: folded) {
  .app-container {
    flex-direction: column;
  }
}

Dit is enorm waardevol voor mediaplayers, documentviewers of elke app die baat kan hebben bij een opstelling met twee schermen. Stel u voor dat uw videospeler de bediening automatisch naar het onderste scherm verplaatst wanneer het apparaat is opgevouwd—ja, dat gebeurt daadwerkelijk.

Viewport Segments API: verdeel en heers

Als de Device Posture API u de status van het apparaat vertelt, vertelt de Viewport Segments API u iets over zijn anatomie. Wanneer een opvouwbare telefoon gedeeltelijk wordt gesloten, ontstaan verschillende schermgebieden, en met deze API kunt u die segmenten programmatisch opvragen.

In JavaScript retourneert window.visualViewport.segments een array met DOMRects die de grootte, vorm en positie van elk segment beschrijven. In CSS krijgt u nog meer flexibiliteit:

/* Target layouts based on number of segments */
@media (horizontal-viewport-segments: 2) {
  .content-grid {
    grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);
  }
}

De CSS-omgevingsvariabelen zijn bijzonder elegant. env(viewport-segment-width 1 0) geeft u de breedte van het segment met horizontale index 1 en verticale index 0. Het kost even tijd om het coördinatenstelsel te begrijpen, maar zodra u het doorhebt, zijn de mogelijkheden eindeloos.

Waarom dit belangrijk is voor uw projecten

Het punt is—opvouwbare telefoons zijn geen nicheproduct meer. Ze worden algemeen gangbaar, en de web-APIs om ze te ondersteunen zijn al beschikbaar. Bij NameOcean hebben we het vaak over bouwen voor de toekomst, en dit is een perfect voorbeeld van waarom dat belangrijk is.

Voor startups en ontwikkelaars opent dit volledig nieuwe interactiepatronen. Een reisapp kan op het ene scherm een kaart tonen en op het andere reserveringsgegevens. Een e-commercewebsite kan op het ene segment productafbeeldingen tonen en op het andere reviews. Een code-editor kan mobiele ontwikkelaars eindelijk een echte split-view-ervaring bieden zonder dat er een native app nodig is.

De vouw is geen beperking—het is een kans. En met deze APIs kunt u ervaringen bouwen die native voelen op opvouwbare hardware, terwijl ze voor iedereen op het gewone web toegankelijk blijven.

Aan de slag

Het beste deel? U hoeft niet meteen naar de winkel te rennen om een opvouwbare telefoon te kopen om te beginnen met experimenteren. Safari Technology Preview en Chrome DevTools bieden allebei ondersteuning voor simulators waarmee u deze APIs kunt testen. Start een virtueel apparaat, schakel tussen de vlakke en opgevouwen stand en zie hoe uw layouts in realtime meebewegen.

Als u een bedrijfswebsite of webapplicatie beheert, is dit het moment om uw responsieve ontwerpstrategie te evalueren. De vraag is niet óf opvouwbare telefoons belangrijk zullen worden, maar óf u klaar bent wanneer uw gebruikers ermee beginnen binnen te komen.

Het webplatform blijft zich op fascinerende manieren ontwikkelen, en APIs zoals deze laten zien dat het snel vooruit kan wanneer hardware inspireert tot nieuwe interacties. Nu is het uw beurt om te vouwen.