Sammenleggbare telefoner er her for å bli: Hva webutviklere trenger å vite om de nye enhets-API-ene

La oss være ærlige – sammenleggbare telefoner har ulket seg i teknologiens periferi i flere år nå. Android-brukere har levd med sammenleggbare telefoner, mens vi andre har stått på sidelinja og av og til savnet de elegante enhetsdemoene. Men Apple tok endelig steget, og uansett om du er iPhone-tilhenger eller ikke, har dette skiftet enorme konsekvenser for webutviklingsmiljøet.

Som noen som har fulgt med nøye i dette feltet (og kanskje brukt en pinlig stor del av helgen på å leke med iPhone Duo-simulatoren), kan jeg si deg: API-ene som støtter disse enhetene, er overraskende robuste. Apple publiserte seks videoer om hvordan man bygger apper for Duo, og selv om mye av dette gjelder native iOS, har de holdt døren vidt åpen for webutviklere med noen genuint kule API-er.

La oss se nærmere på hva du faktisk kan bruke i dag.

Device Posture API: Forstå hvordan telefonen er foldet

Først kommer Device Posture API. Dette smarte lille grensesnittet forteller deg om brukeren ser på en flat skjerm, en sammenklappet skjerm eller noe midt imellom. Tenk på det som en statusoppdatering fra enheten om dens fysiske tilstand.

I JavaScript får du tilgang til API-et gjennom navigator.devicePosture, som forteller deg om skjermen er i tilstanden continuous (vanlig flat skjerm) eller folded (delvis lukket som en bærbar PC). I CSS er det enda enklere med mediespørringen device-posture:

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

Dette er enormt viktig for mediespillere, dokumentvisningsapper eller alle apper som kan ha nytte av et oppsett med to skjermer. Tenk deg at videospilleren automatisk flytter kontrollene til den nederste skjermen når enheten er sammenklappet – ja, det skjer.

Viewport Segments API: Del og hersk

Hvis Device Posture API forteller deg om tilstanden til enheten, forteller Viewport Segments API deg om dens anatomi. Når en sammenleggbar telefon er delvis lukket, dannes det tydelige skjermområder, og dette API-et lar deg slå opp segmentene programmessig.

I JavaScript returnerer window.visualViewport.segments en rekke av DOMRect-objekter som beskriver størrelsen, formen og plasseringen til hvert segment. I CSS får du enda mer fleksibilitet:

/* 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);
  }
}

CSS-miljøvariablene er spesielt elegante. env(viewport-segment-width 1 0) gir deg bredden på segmentet med horisontal indeks 1 og vertikal indeks 0. Det tar litt tid å få koordinatsystemet i hodet, men når det først faller på plass, er mulighetene uendelige.

Hvorfor dette betyr noe for prosjektene dine

Her er poenget: Sammenleggbare telefoner er ikke lenger et nisjeprodukt. De blir mainstream, og web-API-ene er allerede her for å støtte dem. Hos NameOcean snakker vi mye om å bygge for fremtiden, og dette er et perfekt eksempel på hvorfor det betyr noe.

For oppstartsbedrifter og utviklere åpner dette døren for helt nye interaksjonsmønstre. En reiseapp kan vise et kart på den ene skjermen og bestillingsdetaljer på den andre. En e-handelsside kan vise produktbilder i det ene segmentet og anmeldelser i det andre. En kodeeditor kan endelig gi mobilutviklere en ekte opplevelse med delt skjerm, uten at det kreves noen native app.

Skillelinjen er ikke en begrensning – den er en mulighet. Med disse API-ene kan du bygge opplevelser som gir en nativ følelse på sammenleggbar maskinvare, samtidig som de fortsatt er tilgjengelige for alle på det vanlige web.

Kom i gang

Det beste? Du trenger ikke å skynte deg ut for å kjøpe en sammenleggbar telefon for å begynne å eksperimentere. Både Safari Technology Preview og Chrome DevTools har simulatorstøtte for testing av disse API-ene. Start opp en virtuell enhet, veksle mellom flat og sammenklappet tilstand, og se hvordan oppsettene tilpasser seg i sanntid.

Hvis du driver en bedriftsnettside eller en webapp, er det på tide å revidere strategien for responsivt design. Spørsmålet er ikke om sammenleggbare telefoner vil få betydning – det er om du er klar når brukerne dine begynner å dukke opp med dem.

Webplattformen utvikler seg fortsatt på fascinerende måter, og API-er som disse viser at den kan reagere raskt når maskinvare gir inspirasjon til nye interaksjonsformer. Nå er det din tur til å folde.