Jak udělat web, který funguje na mobilu

Skoro každý dnes otevře web nejdřív na telefonu. Když se stránka na mobilu rozsype – text je maličký, musí se posouvat do stran, tlačítka nejdou trefit – návštěvník rychle odejde. Google navíc weby přívětivé k mobilu upřednostňuje ve vyhledávání. Dobrá zpráva: udělat web „responzivní" (takový, co se sám přizpůsobí displeji) stojí na třech jednoduchých věcech. Pojďme na ně.

1. Jedna řádka, na kterou se nejčastěji zapomíná

Úplný základ responzivity je jediná značka v <head> stránky. Bez ní telefon web zmenší, jako by šlo o počítačový monitor – všechno je pidi. Přidejte tuhle řádku:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Říká prohlížeči: „šířku ber podle displeje zařízení a nezmenšuj stránku napevno". Tohle je nutný start – bez téhle řádky nezaberou ani triky níže.

2. Nepoužívejte pevné šířky

Největší nepřítel mobilu je pevná šířka v pixelech. Když dáte width: 800px, na telefonu širokém 360 px stránka přeteče a musí se posouvat do stran. Řešení: místo pevné šířky používejte pružné hodnoty.

/* ŠPATNĚ – pevná šířka */
.obsah { width: 800px; }

/* DOBŘE – přizpůsobí se, ale nepřeroste */
.obsah { max-width: 800px; width: 100%; }

A jedno pravidlo, které vyřeší většinu problémů s obrázky, aby nikdy nevykoukly „ven" z displeje:

img { max-width: 100%; height: auto; }

3. Media queries – jádro responzivity

Media query je pravidlo v CSS, které říká „tohle použij jen když je displej takhle široký". Nejčastěji ho využijete pro úzké displeje (telefony). Zápis vypadá takto:

@media (max-width: 600px) {
  /* pravidla jen pro displeje užší než 600 px */
}

Ukažme si to na typické situaci: dva sloupce vedle sebe na počítači, které se na mobilu poskládají pod sebe.

.sloupce { display: flex; gap: 20px; }
.sloupce > div { flex: 1; }

@media (max-width: 600px) {
  .sloupce { flex-direction: column; }
}

Na širokém displeji jsou boxy vedle sebe (flex-direction je normálně row). Jakmile se displej zúží pod 600 px, media query přepne směr na column a boxy se srovnají pod sebe:

Ještě dvě věci pro pohodlí na mobilu

• Čitelné písmo. Na mobilu ať má běžný text aspoň 16px, jinak ho lidé musí přibližovat.
• Tlačítka, co jdou trefit prstem. Dejte odkazům a tlačítkům dost místa (třeba padding: 12px 16px), ať se dají pohodlně klepnout.

Jak si to vyzkoušet

Nemusíte mít deset telefonů. Stačí:

• Zmenšit okno prohlížeče – chytněte pravý okraj okna a táhněte doleva. Uvidíte, jak se web živě mění.
• Režim zařízení v prohlížeči – v Chrome stiskněte F12 a pak ikonu telefonu/tabletu (nebo Ctrl+Shift+M). Můžete si vybrat konkrétní model.
• Otevřít web na svém telefonu – nejspolehlivější zkouška ze všech.

Časté chyby

• Chybí viewport meta. Bez té jedné řádky v <head> nefunguje nic z toho ostatního.
• Pevné šířky v pixelech. Způsobují vodorovné posouvání. Používejte max-width a %.
• Moc malé písmo a tlačítka nalepená na sebe. Na mobilu se špatně čte i kliká.