I telefoni pieghevoli hanno trovato casa: cosa devono sapere gli sviluppatori web delle nuove API per i dispositivi

Facciamo lealmente il punto: da qualche anno i telefoni pieghevoli restano ai margini del panorama tecnologico. Gli utenti Android vivono da anni l'esperienza pieghevole, mentre il resto di noi guardava dalla tribuna, ogni tanto lasciandosi sedurre dalle eleganti dimostrazioni di quei dispositivi. Ma Apple ha finalmente fatto il salto e, che si preferisca iPhone o meno, questo cambiamento ha implicazioni enormi per la comunità dello sviluppo web.

Ho seguito da vicino questo settore (e non è escluso che abbia dedicato un fine settimana, in modo piuttosto imbarazzante, a giocare con il simulatore di iPhone Duo), quindi posso dirvi che le API web a supporto di questi dispositivi sono sorprendentemente ben strutturate. Apple ha pubblicato sei video su come sviluppare app per iPhone Duo e, sebbene gran parte del materiale riguardi lo sviluppo nativo per iOS, ha lasciato le porte spalancate agli sviluppatori web con alcune API davvero interessanti.

Vediamo quindi che cosa puoi già utilizzare oggi.

Device Posture API: conoscere lo stato di piegatura

Partiamo dalla Device Posture API. Questa utile interfaccia ti indica se l'utente sta guardando uno schermo piatto, un display piegato o una condizione intermedia. È come se il dispositivo fornisse un aggiornamento sul proprio stato fisico.

In JavaScript puoi accedervi tramite navigator.devicePosture, che ti indica se lo schermo è continuous (display piatto normale) oppure folded (parzialmente chiuso, come un computer portatile). In CSS è ancora più semplice grazie alla media query device-posture:

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

Questo rappresenta un enorme vantaggio per i player multimediali, i visualizzatori di documenti o qualsiasi app che possa trarre vantaggio da una configurazione a due schermi. Immagina un player video che sposta automaticamente i controlli sullo schermo inferiore quando il dispositivo è piegato: sì, sta già accadendo.

Viewport Segments API: dividi e conquista

Se la Device Posture API ti indica lo stato del dispositivo, la Viewport Segments API ne descrive l'anatomia. Quando uno smartphone pieghevole viene chiuso parzialmente, si formano regioni distinte dello schermo e questa API consente di interrogare programmaticamente tali segmenti.

In JavaScript, window.visualViewport.segments restituisce un array di DOMRects che descrivono dimensioni, forma e posizione di ciascun segmento. In CSS hai ancora più flessibilità:

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

Le variabili d'ambiente CSS sono particolarmente eleganti. env(viewport-segment-width 1 0) fornisce la larghezza del segmento con indice orizzontale 1 e indice verticale 0. Serve un attimo per assimilare il sistema di coordinate, ma una volta compreso il funzionamento, le possibilità sono infinite.

Perché è importante per i tuoi progetti

Ecco il punto: i telefoni pieghevoli non sono più un prodotto di nicchia. Stanno diventando mainstream e le API web necessarie per supportarli sono già disponibili. In NameOcean parliamo spesso di come costruire per il futuro, e questo è un esempio perfetto del perché sia importante farlo.

Per startup e sviluppatori, questo apre modelli di interazione interamente nuovi. Un'app per viaggi potrebbe mostrare una mappa su uno schermo e i dettagli della prenotazione sull'altro. Un sito di e-commerce potrebbe visualizzare le immagini dei prodotti su un segmento e le recensioni su un altro. Un editor di codice potrebbe finalmente offrire agli sviluppatori mobili un'autentica esperienza in vista divisa, senza la necessità di un'app nativa.

La piega non è una limitazione, ma un'opportunità. E con queste API puoi creare esperienze che risultano native sull'hardware pieghevole, pur restando accessibili a chiunque sul web tradizionale.

Per iniziare

La parte migliore? Per iniziare a sperimentare non devi correre ad acquistare uno smartphone pieghevole. Sia Safari Technology Preview sia Chrome DevTools consentono di utilizzare un simulatore per testare queste API. Avvia un dispositivo virtuale, passa dallo stato piatto a quello piegato e osserva come i layout si adattano in tempo reale.

Se gestisci un sito web aziendale o un'app web, è il momento giusto per riesaminare la tua strategia di progettazione responsive. La domanda non è se i telefoni pieghevoli avranno un impatto, ma se sarai pronto quando i tuoi utenti inizieranno a presentarsi con uno.

La piattaforma web continua a evolversi in modi affascinanti e API come queste dimostrano che può avanzare rapidamente quando è l'hardware a ispirare nuove interazioni. Ora tocca a te piegare.