Mobil a responzivita

Zeptej se kohokoliv, kdo provozuje web, a řekne ti to samé: většina návštěv přijde z mobilu. Přesto se web většinou navrhuje na velké obrazovce, protože na ní ho autor dělá.

Jak si mobil zobrazit

Nemusíš mít telefon po ruce.

1. Otevři nástroje pro vývojáře

   V prohlížeči stiskni F12, nebo na macOS Cmd+Alt+I.

2. Zapni režim zařízení

   V Chrome je nahoře ikona telefonu a tabletu, nebo Ctrl+Shift+M (macOS Cmd+Shift+M).

3. Nastav šířku 360 px

   To je rozumná spodní hranice běžných telefonů. Když web funguje na 360, funguje všude.

4. Zkontroluj i 768 px

   Tablet a menší notebooky. Tady se často rozbije rozvržení, které funguje na mobilu i na velkém monitoru.

Pět míst, kde se to nejčastěji rozbije

1. Vodorovné posouvání

   Nejčastější a nejošklivější problém. Něco je širší než obrazovka a celá stránka jde posunout do strany. Většinou za to může obrázek, tabulka nebo blok kódu s pevnou šířkou.

2. Nadpisy, které se nevejdou

   Velikost, která na monitoru vypadá skvěle, zabere na mobilu půl obrazovky nebo se rozpadne uprostřed slova.

3. Navigace

   Vodorovné menu s pěti položkami se na mobil nevejde. Potřebuje jiné řešení, ne jen zmenšit.

4. Příliš malé cíle na klik

   Odkaz vysoký 20 px se prstem trefuje mizerně. Minimum je zhruba 44 × 44 px.

5. Zbytečné mezery

   Odsazení, které na monitoru dělá vzdušnost, na mobilu ukrajuje polovinu šířky.

Projdi web z hlediska mobilu a oprav problémy.

Kontroluj tyhle věci a u každé mi napiš, jestli byla v pořádku,
nebo cos změnil:

1. Nikde se stránka nedá posunout vodorovně (žádný přetékající prvek).
2. Nadpisy mají na úzké obrazovce menší velikost než na široké.
3. Navigace je na mobilu použitelná.
4. Klikatelné prvky mají aspoň 44×44 px.
5. Odsazení od okrajů je na mobilu menší než na desktopu.
6. Text má pohodlnou velikost, minimálně 16 px.

Testuj šířky 360, 768 a 1280 px.

Vodorovné posouvání: jak ho najít

Tenhle problém je záludný, protože nevidíš, který prvek za něj může.

Na mobilní šířce se stránka dá posunout vodorovně, což nechci.

Najdi, který prvek je širší než obrazovka. Projdi styly a hledej pevné
šířky, nezalomitelný text, obrázky bez omezení šířky nebo prvky
s odsazením, které se přičítá k šířce.

Napiš mi, co to způsobuje, a oprav to. Nepoužívej k tomu overflow-hidden
na celé stránce – to problém jen schová.

Co znamená „mobile first“

Uslyšíš to a stojí za to vědět, co to je.

Nemusíš to řešit sám, ale vyplatí se to Claudovi říct.

Kontrola na skutečném telefonu

Nakonec se stejně vyplatí podívat na to na skutečném zařízení.

Když jsou telefon i počítač na stejné Wi-Fi, Next.js ti při spuštění vypíše i síťovou adresu:

▲ Next.js 16.x.x
- Local:    http://localhost:3000
- Network:  http://192.168.1.24:3000

Tu druhou adresu napiš do prohlížeče v telefonu. Uvidíš svůj web na skutečné obrazovce, s dotykem a se skutečným písmem.