Foldbare telefoner er kommet for at blive – og dit website bør være klar

Lad os lige slå fast en ting: foldbare telefoner har været på vej i et par år nu. Android-brugere har levet den foldbare hverdag, mens vi andre har set til fra sidelinjen og af og til sukket lidt misundeligt over de der elegante produktdemoer. Men nu har Apple endelig taget springet, og uanset om du er iPhone- eller Android-fan, så har denne udvikling kæmpe betydning for os, der bygger websites.

Jeg har fulgt det her område tæt (og ja, jeg har brugt pinligt meget tid i weekenden på at lege med iPhone Duo-simulatoren), og jeg kan godt afsløre: web-API'erne til de her enheder er faktisk ret imponerende. Apple har smidt seks videoer ud om, hvordan man bygger apps til Duo'en, og selvom meget af det er native iOS-territorium, så har de efterladt døren på klem for os webudviklere med nogle genuint spændende APIs.

Så lad os dykke ned i, hvad du faktisk kan bruge allerede i dag.

Device Posture API: Kend din enheds tilstand

Først ud er Device Posture API'en. Den lille smarte grænseflade fortæller dig, om brugeren kigger på en flad skærm, en foldet skærm eller noget midt imellem. Tænk på det som din enhed, der giver dig en statusopdatering på sin fysiske tilstand.

I JavaScript tilgår du den via navigator.devicePosture, som fortæller dig, om skærmen er continuous (normal flad skærm) eller folded (delvist lukket som en bærbar). I CSS bliver det endnu renere med device-posture media query'en:

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

Det her er kæmpestort for medieafspillere, dokumentvisere eller enhver app, der kan have glæde af et to-skærms-setup. Forestil dig, at din videoafspiller automatisk flytter betjening til den nederste skærm, når enheden er foldet – ja, det kan lade sig gøre.

Viewport Segments API: Opdel erobrer

Hvis Device Posture API'en fortæller dig enhedens tilstand, så fortæller Viewport Segments API'en dig noget om dens anatomi. Når en foldbar telefon er delvist lukket, skaber den adskilte skærmregioner, og den her API lader dig slå de segmenter op programmatisk.

I JavaScript returnerer window.visualViewport.segments et array af DOMRects, der beskriver hvert segments størrelse, facon og position. I CSS får du endnu mere fleksibilitet:

/* Mål layouts baseret på antal segmenter */
@media (horizontal-viewport-segments: 2) {
  .content-grid {
    grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);
  }
}

CSS environment-variablerne er særligt elegante. env(viewport-segment-width 1 0) giver dig bredden af segmentet ved vandret indeks 1, lodret indeks 0. Det tager lidt tid at vænne sig til koordinatsystemet, men når det først klikker, er mulighederne nærmest uendelige.

Hvorfor det her betyder noget for dine projekter

Her er pointen – foldbare telefoner er ikke længere et nicheprodukt. De bliver mainstream, og web-API'erne er allerede på plads til at understøtte dem. Hos NameOcean snakker vi meget om at bygge til fremtiden, og det her er et perfekt eksempel på, hvorfor det er vigtigt.

For startups og udviklere åbner det helt nye interaktionsmønstre. En rejseapp kunne vise et kort på den ene skærm og bookingsdetaljer på den anden. En webshop kunne vise produktbilleder på et segment og anmeldelser på et andet. En kodeeditor kunne endelig give mobiludviklere en ægte split-view-oplevelse uden at kræve en native app.

Skærmfolden er ikke en begrænsning – det er en mulighed. Og med de her APIs kan du bygge oplevelser, der føles hjemmehørende på foldbart hardware, samtidig med at de stadig er tilgængelige for alle på det normale web.

Kom i gang

Det bedste ved det hele? Du behøver ikke løbe ud og købe en foldbar telefon for at begynde at eksperimentere. Både Safari Technology Preview og Chrome DevTools har simulator-understøttelse til at teste de her APIs. Start en virtuel enhed, skift mellem flad og foldet tilstand, og se dine layouts tilpasse sig i realtid.

Hvis du driver en hjemmeside eller webapp, er det nu, du skal til at revidere din responsive design-strategi. Spørgsmålet er ikke, om foldbare telefoner vil betyde noget – det er, om du er klar, når dine brugere begynder at dukke op med dem.

Webplatformen fortsætter med at udvikle sig på fascinerende måder, og APIs som disse viser, at den kan bevæge sig hurtigt, når hardware inspirerer til nye interaktioner. Din tur til at folde ud.