Obsah přetéká přes šířku obrazovky

Stránka se načte ve skutečném prohlížeči ve třech šířkách: 390, 768 a 1440 px (config/design.json#viewports), a v každé se porovná šířka dokumentu se šířkou okna. Nález vznikne, když dokument přesahuje o víc než 2 px (thresholds.overflowTolerancePx, tolerance na zaokrouhlení).

Závažnost se mění podle šíře dopadu: objeví-li se přetečení na dost viewportech téže stránky, nález se zvedne na kritický; jinak zůstává varováním. Tři měření jedné stránky se přitom v reportu slučují do jednoho řádku, ne tří skoro stejných.

Co kontrola nedělá: neřekne, který prvek přetéká (jen že dokument je širší), nezkoumá jiné šířky než ty tři, a nepozná přetečení, které vznikne až po interakci: po rozbalení nabídky, po otevření lišty se souhlasem.

Nález je na úrovni stránky. K nálezu patří anotovaný snímek obrazovky s vyznačeným místem, pokud modul stihl bounding box určit.

Na viditelnost v odpovědích AI to nemá vliv žádný a nebudeme předstírat opak: přetečení je vlastnost vykreslení, ne obsahu. Text v HTML je stejný, ať se vejde do obrazovky, nebo ne.

Zato je to jediná kategorie nálezů v celém auditu, kterou si zákazník ověří sám za deset vteřin: otevře web na telefonu a posune prstem doprava. Buď se stránka hýbe do strany, nebo ne.

Proč na tom sejde: vodorovné posouvání na mobilu je jedna z nejvíc frustrujících věcí na webu vůbec. Text uteče mimo obrazovku, tlačítko je napůl schované a návštěvník neví, jestli je to rozbité, nebo to tak má být. Velká část návštěvnosti dnes chodí z telefonu, a přetékající stránka je pro ně horší než pomalá.

Praktický závěr: opravte to kvůli lidem. Je to doporučení bez jakéhokoli vyhledávače v pozadí a nálezu to na hodnotě neubírá; jen mu to mění důvod.

Viníka najdete v prohlížeči za minutu. Otevřete konzoli v šířce, ve které se to děje, a nechte si vypsat všechny prvky přesahující okno:

document.querySelectorAll('*').forEach(el => {
  const r = el.getBoundingClientRect();
  if (r.right > window.innerWidth + 1) console.log(Math.round(r.right), el);
});

Seznam bude krátký a skoro vždycky je v něm jedna z těchhle pěti věcí:

1. Tabulka. Obalte ji kontejnerem s overflow-x: auto: ať se posouvá tabulka, ne stránka. Hlásí to i DSG-07.
2. Dlouhá adresa nebo dlouhé slovo v textu. overflow-wrap: anywhere na obsahovém bloku.
3. Obrázek bez omezení šířky. max-width: 100%; height: auto.
4. Předformátovaný kód (<pre>). Totéž co u tabulky: vlastní posuvník.
5. Pevná šířka v pixelech někde v rozvržení. width: 1200px na mobilu přetéká vždycky; použijte max-width.

A past, do které se při opravě běžně šlape: overflow-x: hidden na <body> problém neřeší, jen ho schová. Obsah zůstane mimo obrazovku, jen se k němu nedá dostat; z rozbité stránky se stane rozbitá stránka bez posuvníku. Navíc to na části zařízení rozbije plynulé scrollování. Opravte příčinu, ne příznak.