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

Apple představil skládací iPhone Duo. Pro web je důležité, co se při změně dostupné plochy stane s rozvržením a stavem stránky.

Měňte šířku i během čtení nebo vyplňování formuláře. Samotná kontrola snímku po načtení tento přechod nepokryje.

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

Šířka okna se může změnit také při otočení běžného telefonu. Skládací zařízení přidává další způsob, jak k tomu dojde během 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.

Segmentové API potřebuje záložní rozvržení

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.

MDN označuje horizontal-viewport-segments za experimentální funkci mimo Baseline. Podpora závisí na prohlížeči a režimu zařízení. Segmenty využijte jako doplněk. Základní rozvržení musí fungovat i bez nich.

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.

Na zařízení s oddělenými segmenty otestujte také polohu modálního okna. Viditelný ohyb displeje sám neznamená, že prohlížeč poskytne segmentové údaje.

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.

Při tažení se mohou ukázat chyby, které po obnovení zmizí. Stejný test lze udělat změnou rozměrů v responzivním režimu DevTools bez reloadu. Pevné přednastavení přechod samo neotestuje.

Začněte několika kontrolními šířkami

Tabulka slouží jako pomůcka pro test, nikoli potvrzené rozměry viewportu konkrétního telefonu. Zkoušejte také přechody mezi nimi.

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í.

Starší web nepotřebuje automaticky přestavbu. Ověřte změnu velikosti a opravte komponenty, které drží jen počáteční rozměry. Další kontext nabízí článek o responzivním webu.

Co s tím seznamem

Z toho tažení vypadne seznam. U každé chyby zaznamenejte šířku a kroky, které ji vyvolají.

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. Rozsah určí až kontrola. Nemusí to znamenat nový web na míru.