Skladacie telefóny a Váš web. Čo sa naozaj mení

Apple predstavil iPhone Duo so skladacím displejom. Pre web je dôležité, ako sa pri zmene dostupnej plochy zachová rozloženie a stav stránky.

Pri testovaní preto meňte šírku aj počas rozpracovaného formulára alebo čítania. Samotná kontrola snímky po načítaní nestačí.

Jedna návšteva, dve šírky okna

Šírka okna sa môže meniť aj na bežnom telefóne pri otočení. Skladacie zariadenie pridáva ďalší spôsob, ako sa to stane uprostred návštevy.

Na skladačke to neplatí. Človek číta článok, roztvorí telefón, prehliadač pošle resize a rozloženie sa má prekresliť okamžite, na tom istom mieste v texte.

Ak sa stránka spraví do poriadku až po obnovení, viete presne, kde je chyba.

Niečo si šírku odmeralo raz a odvtedy sa jej drží. Býva to carousel, virtualizovaná tabuľka, knižnica na grafy alebo vlastný kód, ktorý raz zavolal window.innerWidth a uložil si výsledok.

Na segmentové API sa nedá spoľahnúť všade

Keď o skladačkách píšu vývojárske weby, skoro vždy odporučia Viewport Segments API. Mediálne dotazy horizontal-viewport-segments a premenné env(viewport-segment-*) dovolia rozložiť obsah okolo pántu, takže tlačidlo ani text nikdy nepristanú na ohybe.

MDN označuje horizontal-viewport-segments za experimentálnu funkciu mimo Baseline. Podpora závisí od prehliadača aj režimu zariadenia. Segmenty použite ako doplnok tam, kde sú dostupné. Základné rozloženie musí fungovať aj bez nich.

Zostáva to, čo funguje všade. Rozloženie bez zlomových bodov podľa zariadení, ktoré plynie so šírkou toho, do čoho je vložené.

Čo sa reálne láme

Horizontálne rolovanie. Pevné šírky v pixeloch na 390 bodoch prežijú, lebo ich tam nikto neskúšal. Na 466 bodoch vylezú von a vezmú so sebou tabuľku s min-width, modálne okno so 480 pixelmi a sticky hlavičku s tromi položkami vedľa seba, ktorá sa nemá kam zmestiť.

Potom je tu zlomový bod na 768. Otvorená skladačka má okolo 890 bodov, takže dostane desktopové rozloženie. Do ruky. Na dotyk. Rozbaľovacie menu, ktoré sa otvára na hover, je odvtedy neovládateľné a tlačidlo veľké 28 pixelov sa nedá trafiť prstom, hoci pod kurzorom myši sedelo roky úplne presne.

Dĺžka riadku je tichšia chyba a o to dlhšie vydrží. Jednostĺpcový text bez max-width vyzerá na 390 bodoch v poriadku a na 890 má stodvadsať znakov na riadok.

Na zariadení s oddelenými segmentmi otestujte aj polohu modálneho okna. Viditeľný ohyb displeja však sám neznamená, že prehliadač poskytne údaje o segmentoch.

Ako to otestovať bez telefónu za dvetisíc dolárov

Otvorte si web v prehliadači a ťahajte okraj okna.

Pomaly, z 1 200 bodov na 440. Bez obnovenia stránky.

Pri ťahaní sa ukážu aj chyby, ktoré po obnovení zmiznú. Rovnaký test môžete urobiť zmenou rozmerov v responzívnom režime DevTools bez opätovného načítania. Pevné prednastavenia tento prechod samy nepokryjú.

Na začiatok použite niekoľko kontrolných šírok.

Hodnoty v tabuľke sú pomôcka pre test, nie potvrdené rozmery viewportu konkrétneho telefónu. Skúšajte aj prechody medzi nimi.

Prečo to riešite, aj keby ste skladačku nikdy nevideli

To isté sa deje na tablete s roztiahnuteľnými oknami, pri rozdelenej obrazovke na Windows aj vtedy, keď si niekto na širokom monitore potiahne prehliadač do tretiny plochy. Váš web vie iba to, koľko má miesta, a to číslo sa mení počas čítania.

Container queries sú v prehliadačoch ako Baseline od februára 2023.

Komponent, ktorý sa prispôsobí šírke svojho rodiča namiesto šírky obrazovky, prežije skladačku, tablet aj rozdelené okno bez jediného riadku navyše, dokonca aj vtedy, keď sa šírka mení uprostred čítania. Rozobrali sme to v článku o konci zlomových bodov podľa zariadení.

Starší web netreba automaticky prestavať. Najprv overte správanie pri zmene veľkosti a opravte komponenty, ktoré si rozmery uložili iba pri načítaní. Ďalší kontext ponúka článok o responzívnom webe.

Čo s tým zoznamom

Z toho ťahania vypadne zoznam. Pri každej chybe zaznamenajte šírku a kroky, ktoré ju vyvolajú.

Stojí za to všimnúť si, že ani jedna z nich nevznikla pre skladačku.

Boli tam roky, len ich nikto nemal ako uvidieť, lebo testovacie zariadenie má vždy jednu šírku a tá sa počas testu nemení, nech ho spustíte koľkokrát chcete. Nové je na tom telefóne za dvetisíc dolárov len to, že tú šírku niekto mení schválne.

Ak sa Vám do toho nechce samému, pozrieme sa naň s Vami. Rozsah opráv sa dá určiť až po kontrole. Nemusí to znamenať nový web na mieru.