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

Apple predstavil 9. septembra iPhone Duo. Predpredaj od 16. októbra, cena od 1 999 dolárov, vnútorný displej 7,6 palca, vonkajší 5,4 palca, obidva s rovnakým pomerom strán.

Pre Váš web je podstatnejšie iné číslo. Skladacie telefóny majú podľa Counterpointu tento rok narásť zhruba o pätinu a ich podiel na celom trhu s telefónmi zostáva okolo dvoch percent, čo vyzerá ako dôvod nerobiť nič.

Lenže ten telefón počas jednej návštevy prehodí šírku okna z necelých 470 bodov na takmer 900. Medzitým sa nič nenačíta odznova.

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

Na bežnom telefóne sa šírka okna nastaví raz a drží. Čokoľvek si ju odmeria pri načítaní, platí do konca 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.

API, o ktorom budete čítať, na iPhone Duo nefunguje

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.

Má to dva háčiky. MDN vedie tú funkciu ako experimentálnu a výslovne mimo Baseline, čiže v časti najpoužívanejších prehliadačov nefunguje. A Safari ju neimplementuje vôbec, rovnako ako Device Posture API.

Na telefóne, ktorý celú tú tému spustil, teda web o pánte nevie nič. Vidí iba okno istej šírky. Rada postavená na segmentoch je odpoveď Chromu a Samsung Internetu na problém, ktorý má Apple.

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, a na 466 vylezú von. Tabuľka s min-width, modálne okno so 480 pixelmi, sticky hlavička s tromi položkami vedľa seba.

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.

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.

Posledná vec sa týka len Samsungu a čínskych skladačiek. Modálne okno vycentrované na stred pristane presne na pánte. Ak Vás to poteší, práve tieto telefóny vedia, kde pánt je, takže to má kto opraviť. Apple takú možnosť nedáva.

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.

Skoro každá chyba z predchádzajúcej kapitoly sa ukáže počas toho ťahania a po načítaní zmizne. Práve preto ju testovanie na pevných rozmeroch nenájde. DevTools s prednastaveným zariadením robí to isté čo reload, teda vyrobí okno a načíta doň stránku.

Štyri šírky stačia.

Apple presné hodnoty pre web nezverejnil. Čísla 466 a 890 sú odhad z tretej strany, prepočítaný z rozlíšenia panela, a riadok so 600 až 700 bodmi je moje odporúčanie, nie parameter nejakého telefónu. Otestujte na nich, ale do kódu ich nepíšte.

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. Rozobrali sme to v článku o konci zlomových bodov podľa zariadení.

Ak Váš web vznikol pred rokom 2023, skoro isto stojí na mediálnych dotazoch podľa zariadení. Nebola to chyba, vtedy to bol správny postup. Len to prestalo zodpovedať tomu, ako ľudia držia obrazovky. Čo z toho ešte platí a čo už nie, sme prešli v texte o responzívnom webe.

Čo s tým zoznamom

Z toho ťahania vypadne zoznam. Väčšinou má tri až štyri položky a jedna z nich je tabuľka.

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í. 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. Bývajú to opravy v troch komponentoch, nie nový web na mieru.