Foldable телефони и уеб: Какво означава това за разработчиците

Нека си говорим директно — сгъваемите телефони се мотаят наоколо от няколко години. Потребителите с Android отдавна се радват на тази технология, докато останалите наблюдавахме отстрани, понякога завиждайки на онези елегантни демонстрации. Но Apple най-накрая направи скока, и независимо дали си фен на iPhone или не, тази промяна има огромни последици за общността на уеб разработчиците.

Като човек, който следи това пространство отблизо (и може би прекарах неудобно много часове през уикенда с емулатора на Duo), мога да ти кажа следното: уеб API-тата, които поддържат тези устройства, са доста добре развити. Apple пусна шест видеа за това как да се разработват приложения за Duo, и макар голяма част от това да е нативна iOS територия, те оставиха вратата широко отворена за уеб разработчиците с някои наистина интересни инструменти.

Нека да разгледаме какво можеш да използваш веднага.

Device Posture API: Знай позицията на устройството

Първата ни спирка е Device Posture API. Този малък интерфейс ти казва дали потребителят гледа плосък екран, сгънат дисплей или нещо по средата. Представи си го като устройството ти да ти дава актуална информация за физическото си състояние.

В JavaScript го достъпваш през navigator.devicePosture, който ще ти каже дали екранът е continuous (нормален плосък дисплей) или folded (частично затворен като лаптоп). В CSS нещата са още по-чисти с медиа заявката device-posture:

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

Това е огромна работа за медия плейъри, четци на документи или всяко приложение, което би спечелило от двуекранна настройка. Представи си видео плейъра ти автоматично да мести контролите на долния екран, когато устройството е сгънато — да, това се случва.

Viewport Segments API: Разделяй и владей

Ако Device Posture API ти казва състоянието на устройството, Viewport Segments API ти разкрива неговата анатомия. Когато сгъваем телефон е частично затворен, той създава отделни екранни зони, и този API ти позволява да ги заявяваш програмно.

В JavaScript window.visualViewport.segments връща масив от DOMRects, описващи размера, формата и позицията на всеки сегмент. В CSS получаваш дори повече гъвкавост:

/* Насочени оформления според броя сегменти */
@media (horizontal-viewport-segments: 2) {
  .content-grid {
    grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);
  }
}

CSS променливите за околната среда са особено елегантни. env(viewport-segment-width 1 0) ти дава ширината на сегмента при хоризонтален индекс 1, вертикален индекс 0. Изисква малко време да свикнеш с координатната система, но щом кликне в главата ти, възможностите стават безкрайни.

Защо това има значение за твоите проекти

Ето същественото — сгъваемите телефони не са нишев продукт вече. Те стават масови, и уеб API-тата вече съществуват, за да ги поддържат. В NameOcean често говорим за изграждане за бъдещето, и това е перфектен пример защо това има значение.

За стартъпи и разработчици това отваря изцяло нови модели на взаимодействие. Едно приложение за пътуване може да показва карта на единия екран и детайли за резервация на другия. Един сайт за електронна търговия може да показва изображения на продукта на единия сегмент и ревюта на другия. Един редактор на код най-накрая може да даде на мобилните разработчици истинско split-view изживяване без никакво нативно приложение.

Гъвкатата част не е ограничение — тя е възможност. И с тези API-та можеш да изграждаш преживявания, които се усещат родни за сгъваемия хардуер, докато същевременно остават достъпни за всички в обикновения уеб.

Първи стъпки

Най-хубавото? Не ти се налага да тичаш да купуваш сгъваем телефон, за да започнеш да експериментираш. Safari Technology Preview и Chrome DevTools и двата имат симулаторна поддръжка за тестване на тези API-та. Пусни виртуално устройство, превключвай между плоско и сгънато състояние и гледай оформленията си да се адаптират в реално време.

Ако управляваш бизнес уебсайт или приложение, сега е моментът да прегледаш стратегията си за responsive дизайн. Въпросът не е дали сгъваемите телефони ще имат значение — а дали ще си подготвен, когато потребителите ти започнат да ги използват.

Уеб платформата продължава да се развива по вълнуващи начини, и API-та като тези доказват, че може да се движи бързо, когато хардуерът вдъхновява нови взаимодействия. Твой ред е да сгъваш.