iPhone Duo a váš web: co mění skládací iPhone

23. října 2026 začal v Česku prodej iPhonu Duo, prvního skládacího telefonu od Applu. Pro majitele webů je to dobrá chvíle na kontrolu: Duo ukáže web ve dvou tvarech obrazovky, se kterými většina stránek nepočítá.

Svůj web jsem v rozměrech iPhonu Duo prošel hned v den startu prodeje a našel čtyři místa, která nefungovala tak, jak měla. V článku popíšu, čím je Duo pro web jiné, co se na stránkách typicky rozbije a jak si web otestujete sami, i bez telefonu za 55 tisíc.

Apple iPhone Duo představil 9. září 2026. Telefon se rozevírá jako kniha. Zavřený má vnější displej s úhlopříčkou 5,4″, po otevření se uvnitř objeví druhý displej s úhlopříčkou 7,6″.

Pro web není důležitá úhlopříčka, ale tvar. Složený Duo je širší a zároveň nižší než běžný iPhone. Rozložený je širší než vyšší: celý telefon má podle technických specifikací Applu v otevřeném stavu 16,5 cm na šířku a 11,8 cm na výšku. Web tak dostane šířku malého tabletu, ale výšku telefonu.

Weby nepracují s fyzickými pixely displeje, ale s většími „CSS pixely“. U současných iPhonů připadají na jeden CSS pixel tři fyzické, takže běžný iPhone má pro web šířku zhruba 390 až 440 px. Když stejný přepočet použijete na Duo, vyjde složený displej asi na 466 px na šířku a rozložený na 890 × 626 px. Apple tyhle hodnoty pro Safari oficiálně nezveřejnil, berte je proto jako dobrý odhad, ne jako přesné číslo.

U skládacích telefonů s Androidem umí prohlížeč Chrome webu říct, že je displej rozdělený ohybem a kde přesně ohyb vede. Slouží k tomu rozhraní Viewport Segments. Safari ho podle přehledu caniuse nepodporuje ani v aktuální verzi pro iOS 27. Web na iPhonu Duo tedy neví, že běží na skládacím telefonu. Vidí jen to, že se mu změnila velikost okna.

Pro návrh webu z toho plynou tři věci:

• Nejde navrhovat „pro iPhone Duo“. Navrhuje se pro šířky a výšky, které Duo vytváří. Web se musí přizpůsobit jakémukoli rozměru, ne jen těm, na které jste zvyklí.
• Rozložený displej padá do přechodového pásma. Kolem 890 px weby obvykle přepínají z mobilní verze na tabletovou nebo počítačovou. Uvidíte tedy širší rozvržení, jenže na nízké obrazovce a ovládané prstem.
• Web může dostat i půlku displeje. Duo má podle tiskové zprávy Applu Split View, tedy dvě aplikace vedle sebe, a Safari umí otevřít dvě okna najednou. Web pak běží v polovině rozloženého displeje, tedy zase v úplně jiné šířce.

Svůj web jsem prošel ve všech polohách Dua: složený na výšku i na šířku, rozložený naležato i na výšku. Žádná stránka se nerozpadla a nikde nevznikl vodorovný posuvník. Našel jsem ale čtyři místa, která se na běžném telefonu ani na počítači neprojeví.

1. Úvodní sekce se nevešla na obrazovku. Úvod hlavní stránky je navržený na celou výšku displeje a od šířky tabletu má velkorysé odsazení. Rozložený Duo má ale šířku tabletu a výšku telefonu, takže statistiky pod tlačítky spadly pod okraj. Safari navíc počítá „celou výšku obrazovky“ (jednotku 100vh) i s lištou, která se při posouvání schová, takže obsah vycházel níž, než je vidět. Pomohla novější jednotka 100svh, která počítá jen s viditelnou plochou, a menší odsazení na nízkých dotykových displejích.
2. Řádek s daty v článku přetekl. Hlavička článku ukazuje délku čtení, počet kapitol a dvě data vedle sebe. Na šířce kolem 678 px, kterou má složený Duo otočený na šířku, se data nevešla a vyjela za okraj. Teď jsou ve dvou řádcích, dokud na ně není dost místa.
3. Cookie lišta byla vyšší než displej. Složený Duo na šířku má pro web na výšku necelých 466 px a lišty Safari z toho ještě ukrojí. V téhle poloze byla lišta se souhlasem s cookies vyšší než viditelná plocha a křížek na zavření zůstal mimo obrazovku. Teď je lišta vždy nižší než displej a zbytek se posune uvnitř ní.
4. Odkazy v patičce byly na prst moc malé. Na rozloženém displeji se zobrazí širší patička s odkazy v jednom řádku, vysokými sotva 17 px. S myší to nevadí, prstem se do nich trefuje špatně. Na dotykových displejích teď mají větší plochu na klepnutí.

Žádná z úprav nevznikla jen kvůli iPhonu Duo. Web se teď řídí tím, jestli je obrazovka nízká a jestli se ovládá prstem, a to pomůže i telefonům otočeným na šířku nebo tabletům. Jádro úpravy vypadá takhle:

/* Výška podle viditelné plochy, ne podle 100vh */
.hero {
  min-height: 100svh;
}

/* Nízký dotykový displej: Duo rozložený naležato, telefon na šířku */
@media (pointer: coarse) and (max-height: 700px) {
  .hero {
    padding-top: 6rem;
    padding-bottom: 3rem;
  }
}

Duo je drahý a nové objednávky Apple v Česku v den startu prodeje doručoval až 25. ledna 2027. Na kontrolu webu ho ale nepotřebujete, stačí prohlížeč Chrome v počítači:

1. Otevřete svůj web a stiskněte F12 (na Macu Cmd + Option + I).
2. Zapněte zobrazení zařízení ikonou telefonu vlevo nahoře, nebo zkratkou Ctrl + Shift + M.
3. V nabídce zařízení zvolte „Edit“ a přidejte vlastní zařízení s rozměry 466 × 678 (složený), 890 × 626 (rozložený naležato) a 626 × 890 (rozložený na výšku). Poměr pixelů nastavte na 3 a typ na „Mobile“, ať se web chová jako na dotykovém displeji.
4. Každý rozměr projeďte od začátku do konce a otočte ho tlačítkem pro změnu orientace.

1. iPhone Duo ukáže web jako širší a nižší telefon (složený) a jako tablet s výškou telefonu (rozložený).
2. Safari webu neřekne, jestli je telefon složený, ani kde vede ohyb. Web musí obstát v jakémkoli rozměru.
3. Projděte web v Chromu ve třech rozměrech z článku. Nejčastěji se rozbije úvodní sekce, vyskakovací lišty a malé odkazy.

Web, který se přizpůsobí jakékoli obrazovce, stavím jako web na míru postavený na vaší vizuální identitě. Orientační ceny najdete v ceníku.