Telefoanele pliabile au venit, iar web-ul e pregătit

Să fim sinceri—telefoanele pliabile au tot bâjbâit prin periferia tech timp de câțiva ani. Utilizatorii Android s-au bucurat de viața pliabilă în timp ce restul dintre noi am privit de pe margine, ocazional admirând acele demonstrații elegante. Dar Apple a făcut în sfârșit saltul, și indiferent de tabăra în care ești, această schimbare are implicații masive pentru comunitatea de web development.

Ca cineva care a urmărit acest spațiu cu atenție (și care poate a petrecut o cantitate jenantă de timp testând simulatorul Duo în weekend), pot să-ți spun: API-urile web care suportă aceste dispozitive sunt surprinzător de solide. Apple a publicat șase video-uri despre cum să construiești aplicații pentru Duo, și chiar dacă mare parte ține de dezvoltarea nativă iOS, au lăsat ușa deschisă pentru web developeri cu niște API-uri chiar interesante.

Așa că hai să vedem ce poți folosi chiar acum.

API-ul Device Posture: Știi când se pliază

Primul este Device Posture API. Această interfață simpatică îți spune dacă ecranul e plat, pliat, sau ceva între ele. Gândește-te la asta ca la un update de stare de la dispozitivul tău despre poziția lui fizică.

În JavaScript, îl accesezi prin navigator.devicePosture, care îți spune dacă ecranul e continuous (afișaj normal, plat) sau folded (parțial închis, ca un laptop). În CSS, e și mai curat cu media query-ul device-posture:

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

Acest lucru este enorm pentru playere media, vizualizatoare de documente, sau orice aplicație care ar putea beneficia de un setup cu două ecrane. Imaginează-ți playerul video mutând automat controalele pe ecranul de jos când dispozitivul e pliat—da, asta se întâmplă deja.

API-ul Viewport Segments: Împarte și cucerește

Dacă Device Posture API îți spune starea dispozitivului, Viewport Segments API îți descrie anatomia lui. Când un telefon pliabil e parțial închis, creează regiuni distincte ale ecranului, iar acest API îți permite să le interoghezi programatic.

În JavaScript, window.visualViewport.segments returnează un array de DOMRects care descriu dimensiunea, forma și poziția fiecărui segment. În CSS, ai și mai multă flexibilitate:

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

Variabilele de mediu CSS sunt deosebit de elegante. env(viewport-segment-width 1 0) îți dă lățimea segmentului de la indicele orizontal 1, vertical 0. Îți ia un moment să înțelegi sistemul de coordonate, dar odată ce ți se lămurește, possibilitățile sunt nenumărate.

De ce contează pentru proiectele tale

Iată situația—telefoanele pliabile nu mai sunt un produs de nișă. Devin mainstream, iar API-urile web sunt deja aici să le suporte. La NameOcean, vorbim mult despre construirea pentru viitor, și acesta e un exemplu perfect de ce contează asta.

Pentru startup-uri și developeri, se deschid tipare de interacțiune complet noi. O aplicație de călătorii ar putea afișa o hartă pe un ecran și detaliile de rezervare pe celălalt. Un site de e-commerce ar putea arăta imaginile produsului pe un segment și recenziile pe altul. Un editor de cod ar putea oferi în sfârșit dezvoltatorilor mobili o experiență reală split-view fără nicio aplicație nativă.

Creștetura nu e o limitare—e o oportunitate. Și cu aceste API-uri, poți construi experiențe care se simt native pentru hardware-ul pliabil, rămânând în același timp accesibile pentru toată lumea de pe web-ul normal.

Cum să începi

Cel mai bun lucru? Nu trebuie să te repezi să cumperi un telefon pliabil ca să începi să experimentezi. Safari Technology Preview și Chrome DevTools ambele au suport de simulator pentru testarea acestor API-uri. Pornește un dispozitiv virtual, comută între stările plat și pliat, și privește cum layout-urile tale se adaptează în timp real.

Dacă ai un site de business sau o aplicație web, acum e momentul să verifici strategia ta de responsive design. Întrebarea nu e dacă telefoanele pliabile vor conta—ci dacă vei fi pregătit când utilizatorii tăi încep să apară cu ele.

Platforma web continuă să evolueze în moduri fascinante, iar API-uri ca acestea dovedesc că poate să se miște rapid când hardware-ul inspiră interacțiuni noi. Rândul tău să pllezi.