Skládací telefony mění web: Co potřebujete vědět jako vývojář

Přiznejme si to – skládací telefony se v oblasti technologií pohybují už několik let. Uživatelé Androidu si užívali život se skládačkami, zatímco ostatní jen závistivě sledovali ty působivé demonstrace. Jenže Apple konečně udělal skok a ať už jste team iPhone, nebo ne, tato změna má obrovský dopad na komunitu webových vývojářů.

Sleduji tento prostor už dlouho (a možná jsem strávil trapně hodně času hrát si s iPhone Duo simulátorem o víkendu) a můžu říct: webové API pro tyto zařízení jsou překvapivě vyspělé. Apple zveřejnil šest videí o tom, jak stavět aplikace pro Duo, a ačkoli hodně z toho se týká nativního iOS, nechali otevřené dveře pro webové vývojáře s několika skutečně zajímavými API.

Pojďme se podívat na to, co můžete používat už dnes.

Device Posture API: Poznejte svůj ohyb

Začněme Device Posture API. Toto šikovné rozhraní vám prozradí, jestli uživatel kouká na rovnou obrazovku, nebo na složený displej. Představte si to jako status update vašeho zařízení o jeho fyzickém stavu.

V JavaScriptu k němu přistoupíte přes navigator.devicePosture, které vám řekne, jestli je obrazovka continuous (normální rovný displej) nebo folded (částečně zavřený jako notebook). V CSS je to ještě čistší s media query device-posture:

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

To je velká věc pro přehrávače médií, prohlížeče dokumentů nebo jakékoli aplikace, které by mohly využít dvě obrazovky. Představte si, že váš video přehrávač automaticky přesune ovládací prvky na spodní obrazovku, když je zařízení složené – ano, tohle už funguje.

Viewport Segments API: Rozděl a panuj

zatímco Device Posture API vám říká stav zařízení, Viewport Segments API vám prozrazuje jeho anatomii. Když je skládací telefon částečně zavřený, vytváří distinct screen regions a toto API vám umožňuje se na tyto segmenty ptát programově.

V JavaScriptu vrací window.visualViewport.segments pole DOMRects popisujících velikost, tvar a pozici každého segmentu. V CSS získáte ještě větší flexibilitu:

/* Cílové layouty podle počtu segmentů */
@media (horizontal-viewport-segments: 2) {
  .content-grid {
    grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);
  }
}

CSS environment proměnné jsou obzvlášť elegantní. env(viewport-segment-width 1 0) vám dá šířku segmentu na horizontálním indexu 1, vertikálním indexu 0. Chvíli trvá, než ten souřadnicový systém pochopíte, ale jakmile vám to docvakne, možnosti jsou nekonečné.

Proč by vám to mělo být jedno

Tady je ten háček – skládací telefony už nejsou niche produkt. Stávají se mainstreamem a webová API tu už jsou, aby je podpořila. Na NameOcean hodně mluvíme o stavění pro budoucnost a toto je perfektní příklad, proč na tom záleží.

Pro startupy a vývojáře se otevírají úplně nové interakční vzory. Cestovní aplikace by mohla ukazovat mapu na jedné obrazovce a detaily rezervace na druhé. E-commerce web by mohl zobrazit produktové obrázky na jednom segmentu a recenze na druhém. Code editor by konečně mohl dát mobilním vývojářům skutečný split-view zážitek bez jakékoli nativní aplikace.

Ten záhyb není omezení – je to příležitost. A s těmito API můžete stavět体验, které působí nativně na skládacím hardwaru, zatímco jsou stále dostupné pro všechny na normálním webu.

Jak začít

Ta nejlepší část? Nemusíte hned běžet a kupovat skládací telefon, abyste mohli experimentovat. Safari Technology Preview i Chrome DevTools mají simulator support pro testování těchto API. Spusťte virtuální zařízení, přepínejte mezi flat a folded stavy a sledujte, jak se vaše layouty přizpůsobují v reálném čase.

Pokud provozujete firemní webovou stránku nebo webovou aplikaci, teď je čas zrevidovat vaši responsive design strategii. Otázka není, jestli budou skládací telefony důležité – je to, jestli budete připravení, až se s nimi vaši uživatelé začnou objevovat.

Web platforma se vyvíjí fascinujícím způsobem a API jako tato dokazují, že dokáže reagovat rychle, když hardware inspiruje nové interakce. Teď je řada na vás. Zkuste to.