Čo je viewport height bug a ako ho riešiť pri responzívnom dizajne?
Viewport height bug označuje problém, pri ktorom CSS jednotka „vh“ (viewport height) nereflektuje reálnu výšku zobrazenej oblasti na mobilných zariadeniach kvôli dynamickým prvkom prehliadača (adresný riadok, spodná lišta). Výsledkom je, že elementy nastavené na „100vh“ môžu byť čiastočne neviditeľné alebo presahujúce.
Význam a dopady na UX
Na mobiloch môže mať bug vážny vplyv na zobrazenie navigácie, hero sekcií alebo celostránkových elementov. Používateľ sa nemusí dostať k obsahu alebo naopak, stránka vyzerá “odseknutá”.
Odporúčania a riešenia
Moderné riešenie je používanie jednotky „dvh“ (dynamic viewport height), prípadne JavaScriptu pre detekciu reálnej výšky obrazovky a dynamické nastavovanie elementov.
