Skládací telefony a váš web. Co se opravdu mění

Apple 9. září představil iPhone Duo. Předprodej od 16. října, cena od 1 999 dolarů, vnitřní displej 7,6 palce, vnější 5,4 palce, oba se stejným poměrem stran.

Pro váš web je podstatnější jiné číslo. Skládací telefony mají podle Counterpointu letos vyrůst zhruba o pětinu a jejich podíl na celém trhu s telefony zůstává kolem dvou procent.

Dvě procenta vypadají jako důvod nedělat nic.

Jenže ten telefon během jedné návštěvy přehodí šířku okna z necelých 470 bodů na téměř 900 a mezitím se nic nenačte znovu.

Jedna návštěva, dvě šířky okna

Na běžném telefonu se šířka okna nastaví jednou a drží. Cokoli si ji změří při načtení, platí do konce návštěvy.

Na skládačce to neplatí. Člověk čte článek, rozevře telefon, prohlížeč pošle událost resize, a rozvržení se má překreslit okamžitě a na stejném místě v textu.

Pokud se stránka srovná až po obnovení, víte přesně, kde je chyba. Něco si šířku změřilo jednou a od té doby se jí drží. Bývá to carousel, virtualizovaná tabulka, knihovna na grafy nebo vlastní kód, který jednou zavolal window.innerWidth a uložil si výsledek.

API, o kterém budete číst, na iPhone Duo nefunguje

Když o skládačkách píšou vývojářské weby, skoro vždycky doporučí Viewport Segments API. Mediální dotazy horizontal-viewport-segments a proměnné env(viewport-segment-*) dovolí rozložit obsah kolem pantu, takže tlačítko ani text nikdy nepřistanou na ohybu.

Má to dva háčky. MDN vede tu funkci jako experimentální a výslovně mimo Baseline, takže v části nejpoužívanějších prohlížečů nefunguje. A Safari ji neimplementuje vůbec, stejně jako Device Posture API.

Na telefonu, který celé to téma spustil, tedy web o pantu neví nic. Vidí jenom okno určité šířky. Ta rada je odpovědí Chromu a Samsung Internetu na otázku, kterou položil Apple.

Zbývá to, co funguje všude. Rozvržení bez zlomových bodů podle zařízení, které plyne se šířkou toho, do čeho je vložené.

Co se reálně láme

Horizontální rolování. Pevné šířky v pixelech na 390 bodech přežijí, protože je tam nikdo nezkoušel, a na 466 vylezou ven. Tabulka s min-width, modální okno se 480 pixely, sticky hlavička se třemi položkami vedle sebe.

Pak je tu zlomový bod na 768. Otevřená skládačka má kolem 890 bodů, takže dostane desktopové rozvržení. Do ruky. Na dotyk. Rozbalovací menu, které se otevírá na hover, je od té chvíle neovladatelné a tlačítko velké 28 pixelů se nedá trefit prstem.

Délka řádku je tišší chyba a o to déle vydrží. Jednosloupcový text bez max-width vypadá na 390 bodech v pořádku a na 890 má stodvacet znaků na řádek.

Poslední věc se týká jen Samsungu a čínských skládaček, kde modální okno vycentrované na střed přistane přesně na pantu. Shodou okolností jsou to zároveň telefony, jejichž prohlížeče segmenty umí. Na iPhonu Duo oprava neexistuje.

Jak to otestovat bez telefonu za dva tisíce dolarů

Otevřete si web v prohlížeči a táhněte okraj okna. Pomalu, z 1 200 bodů na 440. Bez obnovení stránky.

Skoro každá chyba z předchozí kapitoly se ukáže během toho tažení a po načtení zmizí. Právě proto ji testování na pevných rozměrech nenajde. DevTools s přednastaveným zařízením dělá totéž co reload, tedy vyrobí okno a načte do něj stránku.

Čtyři šířky, které stačí

Apple přesné hodnoty pro web nezveřejnil. Čísla 466 a 890 jsou odhad třetí strany přepočítaný z rozlišení panelu a řádek se 600 až 700 body je moje doporučení, ne parametr nějakého telefonu. Testujte na nich, ale do kódu je nepište.

Proč to řešíte, i kdybyste skládačku nikdy neviděli

Totéž se děje na tabletu s roztažitelnými okny, při rozdělené obrazovce ve Windows i tehdy, když si někdo na širokém monitoru přetáhne prohlížeč do třetiny plochy. Váš web ví jenom to, kolik má místa, a to číslo se mění během čtení.

Container queries jsou v prohlížečích jako Baseline od února 2023. Komponenta, která se přizpůsobí šířce svého rodiče místo šířky obrazovky, přežije skládačku, tablet i rozdělené okno bez jediného řádku navíc. Rozebrali jsme to v článku o konci zlomových bodů podle zařízení.

Pokud váš web vznikl před rokem 2023, skoro jistě stojí na mediálních dotazech podle zařízení. Nebyla to chyba, tehdy to byl správný postup. Jen to přestalo odpovídat tomu, jak lidé drží obrazovky. Co z toho ještě platí, jsme prošli v textu o responzivním webu.

Co s tím seznamem

Z toho tažení vypadne seznam. Většinou má tři až čtyři položky a jedna z nich je tabulka.

Stojí za povšimnutí, že ani jedna z nich nevznikla kvůli skládačce. Byly tam roky, jen je nikdo nemohl vidět, protože testovací zařízení má vždycky jednu šířku a ta se během testu nemění. Telefon za dva tisíce dolarů jen přivedl někoho, kdo tu šířku mění schválně.

Pokud se vám do toho samotným nechce, podíváme se na něj s vámi. Bývají to opravy ve třech komponentách, ne nový web na míru.