Taitettavat puhelimet ovat täällä – ja niiden web-API:t yllättävät

Olen seurannut taitettavien puhelinten kehitystä sivustakatsojana jo vuosia. Android-käyttäjät ovat nauttineet näistä laitteista, kun me muut olemme katsoneet sivusta those tyylikkäitä demoesittelyjä. Nyt Apple on vihdoin hypännyt mukaan, ja oli mielipiteesi iPhone-verkostosta mikä tahansa, tällä muutoksella on valtavat vaikutukset web-kehittäjäyhteisöön.

Olen tutustunut aiheeseen melko perusteellisesti (ja ehkä käyttänyt häpeällisen paljon aikaa iPhone Duon simulaattorin kanssa), ja voin sanoa: laitteita tukevat web-API:t ovat yllättävän kypsä. Apple julkaisi kuusi videota Duo-sovellusten rakentamisesta, ja vaikka suuri osa on natiivia iOS-kehitystä, ovat he jättäneet web-kehittäjille todella mielenkiintoisia työkaluja.

Katsotaan siis, mitä voit hyödyntää jo tänään.

Device Posture API: Tietokone kertoo asennon

Ensimmäisenä esittelyyn tulee Device Posture API. Tämä näppärä rajapinta kertoo, onko käyttäjän näyttö litteänä, taitettuna vai jotain siltä väliltä. Ajattele sitä laitteen tapaana ilmoittaa fyysinen tilansa.

JavaScriptissä pääset siihen käsään navigator.devicePosture-kautta, joka kertoo onko näyttö continuous (normaali litteä) vai folded (osittain suljettu kannettavan tapaan). CSS:ssä se on vielä siistimpää device-posture-media queryn avulla:

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

Tämä on valtava juttu medialaitteille, dokumenttinäkymille ja sovelluksille, jotka hyötyisivät kahdesta näytöstä. Kuvittele, että videosoittimesi siirtää kontrollit automaattisesti alemmalle näytölle kun laite on taitettuna – kyllä, se onnistuu.

Viewport Segments API: Jaa ja hallitse

Jos Device Posture API kertoo laitteen tilan, Viewport Segments API kertoo sen anatomian. Kun taitettava puhelin on osittain suljettuna, syntyy erillisiä näyttöalueita, ja tämä API mahdollistaa niiden kyselyn ohjelmallisesti.

JavaScriptissä window.visualViewport.segments palauttaa DOMRect-taulukon, joka kuvaa kunkin segmentin koon, muodon ja sijainnin. CSS tarjoaa vielä enemmän joustavuutta:

/* Kohdenna asetteluja segmenttien määrän perusteella */
@media (horizontal-viewport-segments: 2) {
  .content-grid {
    grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);
  }
}

CSS-ympäristömuuttujat ovat erityisen tyylikkäitä. env(viewport-segment-width 1 0) antaa segmentin leveyden vaakaindeksillä 1, pystysuunnassa 0. Koordinaattijärjestelmän omaksuminen vaatii hetken, mutta kun se napsahtaa paikalleen, mahdollisuudet ovat rajattomat.

Miksi tämä on tärkeää projektillesi

Taitettavat puhelimet eivät ole enää niche-tuote. Ne ovat tulossa valtavirtaan, ja web-API:t ovat jo täällä tukemassa niitä. NameOceanilla puhumme paljon tulevaisuuteen rakentamisesta, ja tämä on täydellinen esimerkki siitä miksi se kannattaa.

Yrittäjille ja kehittäjille tämä avaa kokonaan uusia vuorovaikutusmalleja. Matkailusovellus voisi näyttää kartan yhdellä näytöllä ja varaustiedot toisella. Verkkokauppa voisi esittää tuotekuvat yhdessä segmentissä ja arvostelut toisessa. Koodieditori voisi vih finally tarjota mobiilikehittäjille aidon split-view-kokemuksen ilman natiivisovellusta.

Taite ei ole rajoite – se on mahdollisuus. Näiden API:en avulla voit rakentaa kokemuksia, jotka tuntuvat luontevilta taitettavilla laitteilla, mutta ovat silti kaikkien saatavilla peruswebissä.

Mistä aloittaa

Parasta? Sinun ei tarvitse kiirehtiä ostamaan taitettavaa puhelinta kokeillaksesi. Sekä Safari Technology Preview että Chrome DevTools tukevat simulaattoreita näiden API:en testaamiseen. Käynnistä virtuaalilaite, vaihda litteän ja taitetun tilan välillä ja katso miten asettelut mukautuvat reaaliaikaisesti.

Jos pyörität yrityssivustoa tai web-sovellusta, nyt on aika auditoida responsiivinen suunnittelustrategiasi. Kysymys ei ole siitä, tulevatko taitettavat puhelimet olemaan tärkeitä – vaan siitä, oletko valmis kun käyttäjäsi saapuvat niiden kanssa.

Web-alusta kehittyy kiehtovilla tavoilla, ja API:t kuten nämä osoittavat, että se voi liikkua nopeasti kun laitteistot inspiroivat uusia vuorovaikutustapoja. Nyt on sinun vuorosi taittaa.