Bekapcsolódtak a hajlítható telefonok – és az web fejlesztők végre résztvehetnek a buliban

Nézzük be őszintén: a hajlítható telefonok már egy ideje ott köszörögték a tech világában, de eddig főleg az Android felhasználók élvezhették ezt az élményt. Mi meg csak néztük az elegáns demókat, és irigykedtünk. Aztán az Apple végre belépett a piacra, és bárhol is állsz az iPhone-vs-Android vitában, ez a lépés hatalmas változásokat hoz a web fejlesztőknek.

Én személyesen elég sok időt töltöttem hétvégén az iPhone Duo szimulátorral játszadozva, és elárulhatom: a web API-k, amelyek támogatják ezeket az eszközöket, meglepően érettek. Az Apple hat videót tett közzé arról, hogyan lehet alkalmazásokat építeni a Duóra, és bár ezek nagy része az iOS natív világába tartozik, a web fejlesztők számára is nyitott ajtókat hagytak néhány igazán klassz API-val.

Most nézzük meg, mit használhatsz már ma!

Device Posture API: Ismerd meg a készülék hajlását

Első körben a Device Posture API-ról lesz szó. Ez a kis csoda azt mondja meg neked, hogy a felhasználód éppen lapos képernyőt néz, félig hajlított kijelzőt, vagy valami közöttit. Gondolj rá úgy, mint egy státuszfrissítésre a készülék fizikai állapotáról.

JavaScriptben a navigator.devicePosture objektumon keresztül éred el, ami megmondja, hogy a képernyő continuous (normál, lapos) vagy folded (laptopként félig összecsukva) állapotban van-e. CSS-ben még elegánsabb a megoldás a device-posture media queryvel:

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

Ez óriási lépés médialejátszók, dokumentum nézők vagy bármilyen app számára, amely profitálhat a két képernyős felállásból. Képzeld el, hogy a videólejátszód automatikusan áthelyezi a vezérlőket az alsó képernyőre, amikor a készüléket összehajtják – igen, ez megvalósítható.

Viewport Segments API: Oszd fel és uralkodj

Ha a Device Posture API a készülék állapotát mondja meg, akkor a Viewport Segments API annak anatómiáját tárja fel. Amikor egy hajlítható telefon félig zárva van, különálló képernyő régiók jönnek létre, és ez az API lehetővé teszi, hogy programozottan lekérdezd ezeket a szegmenseket.

JavaScriptben a window.visualViewport.segments egy tömböt ad vissza, amely DOMRects-okat tartalmaz – mindegyik szegmens méretét, alakját és pozícióját írja le. CSS-ben még nagyobb rugalmasságot kapsz:

/* Elrendezések célzása a szegmensek számának alapján */
@media (horizontal-viewport-segments: 2) {
  .content-grid {
    grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);
  }
}

A CSS environment változók különösen elegáns megoldást nyújtanak. Az env(viewport-segment-width 1 0) megadja a vízszintes index 1, függőleges index 0 szegmens szélességét. Elsőre kicsit furcsa lehet megérteni a koordináta-rendszert, de amint rááll az agyad, a lehetőségek végtelenek.

Miért fontos ez a projektjeidnek?

A lényeg: a hajlítható telefonok nem marginális termékek már. A mainstreambe tartoznak, és a web API-k már most is itt vannak, hogy támogassák őket. A NameOcean-nál sokat beszélünk arról, hogy a jövőre építünk, és ez tökéletes példa arra, miért számít ez.

Startupoknak és fejlesztőknek ez teljesen új interakciós mintákat nyit meg. Egy utazási app megmutathatja a térképet az egyik képernyőn, a foglalási részleteket a másikon. Egy e-commerce oldal termékképeket jeleníthet meg az egyik szegmensen, értékeléseket a másikon. Egy kódszerkesztő végre valódi osztott nézetet adhat a mobil fejlesztőknek natív alkalmazás nélkül.

A hajtás nem korlátozás – lehetőség. És ezekkel az API-kkal olyan élményeket építhetsz, amelyek natívnak érződnek a hajlítható hardveren, miközben továbbra is elérhetők mindenki számára a hagyományos weben.

Hogyan kezdd el?

A legjobb rész? Nem kell rögtön hajlítható telefont vásárolnod a kísérletezéshez. A Safari Technology Preview és a Chrome DevTools egyaránt tartalmaznak szimulátor támogatást ezekhez az API-khoz. Indíts egy virtuális eszközt, váltogasd a lapos és hajlított állapotok között, és figyeld, ahogy az elrendezéseid valós időben alkalmazkodnak.

Ha vállalkozói weboldalt vagy web alkalmazást működtetsz, most jött el az ideje, hogy átvizsgáld a reszponzív dizájn stratégiádat. A kérdés nem az, hogy számítani fognak-e a hajlítható telefonok – hanem az, hogy készen állsz-e, amikor a felhasználóid már ilyen készülékekkel érkeznek.

A web platform folyamatosan lenyűgöző módon fejlődik, és az ilyen API-k bizonyítják, hogy villámgyorsan tud haladni, amikor a hardver új interakciókat inspirál. Most te jössz – hajtsd be az oldalt!