Dags att vika webben – Foldables har landat

Låt mig vara ärlig. Foldable phones har pysslat runt i tech-kretsar i några år nu. Android-användare har levt det vikbara livet medan vi andra stått vid sidlinjen och smakat på de där eleganta produktdemonstrationerna. Men nu har Apple äntligen hoppat på tåget, och oavsett var du står i iPhone-debatten så har det här enorma konsekvenser för oss som bygger för webben.

Som någon som har hållit koll på det här området (och kanske spenderat lite väl mycket tid med iPhone Duo-simulatorn i helgen) kan jag säga: webb-API:erna som stödjer de här enheterna är förvånansvärt mogna. Apple släppte sex videor om hur man bygger appar för Duo, och medan mycket handlar om native iOS-utveckling så har de lämnat dörren på vid sväng för webbutvecklare med några riktigt coola API:er.

Så låt oss grotta ner oss i vad du faktiskt kan använda idag.

Device Posture API: Känn din vik

Först ut är Device Posture API. Den här lilla smidiga gränssnittet talar om för dig om användaren tittar på en plan skärm, en vikt display, eller något däremellan. Tänk på det som att din enhet ger dig en statusuppdatering om sitt fysiska tillstånd.

I JavaScript kommer du åt den via navigator.devicePosture, som berättar om skärmen är continuous (normal plan skärm) eller folded (delvis stängd som en laptop). I CSS blir det ännu renare med @media (device-posture):

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

Det här är enormt för mediespelare, dokumentvisare, eller appar som skulle dra nytta av en tvåskärmsetup. Tänk dig att din videospelare automatiskt flyttar kontrollerna till den nedre skärmen när enheten är vikt—ja, det funkar.

Viewport Segments API: Dela och härska

Om Device Posture API berättar om enhetens tillstånd, så talar Viewport Segments API om dess anatomi. När en vikbar telefon är delvis stängd skapas distinkta skärmregioner, och det här API:et låter dig ställa frågor om de segmenten programmatiskt.

I JavaScript returnerar window.visualViewport.segments en array av DOMRects som beskriver varje segments storlek, form och position. I CSS får du ännu mer flexibilitet:

/* Rikta layouter baserat på antal segment */
@media (horizontal-viewport-segments: 2) {
  .content-grid {
    grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);
  }
}

CSS-miljövariablerna är särskilt eleganta. env(viewport-segment-width 1 0) ger dig bredden på segmentet vid horisontellt index 1, vertikalt index 0. Det tar ett tag att vänja sig vid koordinatsystemet, men när det klickar öppnar sig oändliga möjligheter.

Varför det här spelar roll för dina projekt

Här är grejen—foldable phones är inte längre en nischprodukt. De blir mainstream, och webb-API:erna finns redan här för att stödja dem. Hos NameOcean pratar vi ofta om att bygga för framtiden, och det här är ett perfekt exempel på varför detmatter.

För startuppar och utvecklare öppnar det här helt nya interaktionsmönster. En resapp could visa en karta på en skärm och bokningsdetaljer på den andra. En e-handelssajt could visa produktbilder på ett segment och recensioner på ett annat. En kodeditor could äntligen ge mobilutvecklare en riktig split-view-upplevelse utan native app.

Vikningen är ingen begränsning—det är en möjlighet. Och med de här API:erna kan du bygga upplevelser som känns native för vikbar hårdvara samtidigt som de fortfarande är tillgängliga för alla på det vanliga webben.

Kom igång

Det bästa? Du behöver inte springa ut och köpa en vikbar telefon för att börja experimentera. Både Safari Technology Preview och Chrome DevTools har simulatorstöd för att testa de här API:erna. Snurra upp en virtuell enhet, växla mellan platt och vikt läge, och se dina layouter anpassa sig i realtid.

Om du driver en företagswebbplats eller webbapp är det nu dags att granska din responsiva designstrategi. Frågan är inte om foldable phones kommer att spela roll—det är om du kommer att vara redo när dina användare börjar dyka upp med dem.

Webbplattformen fortsätter att utvecklas på fascinerande sätt, och API:er som dessa bevisar att den kan röra sig snabbt när hårdvaran inspirerar nya interaktioner. Din tur att vika.