Přistupování na web přes nějaký chytrý telefon, či podobné zařízení, jehož rozměry nedosahují rozměrů stolních monitorů, je čím dál tím běžnější. A zdá se, že tento trend bude pokračovat.
Na západ od nás je situace ještě výraznější. Objevily se první vlaštovky, které dokonce nenavrhují vzhled stránek pro počítač, ale rovnou pro mobil.
Proto není úplně vhodné mobilní verzi zanedbat. Pár tipů, které mohou usnadnit její odladění.
Detekce mobilního zařízení
Obecně lze mobilní zařízení rozpoznat dvěma způsoby. Pomocí skriptu na straně serveru a speciálním kódem ve stylech.
Rozpoznání na straně skriptu
Hotové řešení pro většinu běžných jazyků je k dispozici na webu detectmobilebrowsers.com. Tuto podmínku stačí zakomponovat do vašich stránek a pokud se mobilní zařízení jedná, načíst např. speciální styl.
Toto řešení používám já. Jediné mi fungovalo spolehlivě.
Rozpoznání v CSS
Tento způsob funguje na základě načítání různých stylů podle šířky prohlížeče. Má mnoho výhod - odpadají problémy s cachováním, lze velmi snadno vytvořit styly pro různá zařízení (jinak široká). Na jediný problém jsem narazil - na testovacím mobilu mi tento princip nefungoval.
Možné je buď načítat přímo speciální styl:
<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="../mobile.css" type="text/css" />
Nebo až CSS souboru:
@media screen and (max-device-width: 480px) {
...
}
Šířku je samozřejmě třeba nastavit podle zařízení.
Rozpoznání serverem
Existuje ještě třetí způsob - rozeznat zařízení pomocí serveru. V podstatě se jedná o podobný princip, jako v případě rozeznání skriptem. Jen se podmínka přesouvá do .htaccessu (v případě Apache). Detailní popis je k dispozici na stackoverflow.com.
Nastavení škálování, správná šířka
Problém, na který jsem narazil, bylo vykreslování pouze v úzkém pruhu. V některých prohlížečích (Opera) s tím nešlo nic dělat, v některých se pruh sám po načtení roztáhl na celou šířku.
Ke sjednocení a správnému vykreslování je potřeba do hlavičky HTML přidat meta tag viewport. Tím je možné nastavit počáteční šířku, minimální i maximální šířku a možnosti přibližování.
<meta name="viewport" content="width=device-width, initial-scale=1">
Podrobnosti a detailní návod k použití je rozepsán na webu Mozilly.
Cachování a rozlišení verzí
Pokud nepoužijete rozlišování css styly, je potřeba jednotlivé verze rozlišit adresou. Pokud by byla adresa stejná, docházelo by k cachování, které by způsobilo, že i normálním uživatelům se zobrazuje verze pro mobily a obráceně.
Nejsnazší je přidat parametr GET:
http://mojeadresa.cz/stranka.html?mobile
a existenci parametru pak ověřovat (např. pomocí PHP):
if (isset($_GET['mobile'])) {
...
}
Druhou možností je pak mít pro mobilní verzi vlastní subdoménu a rozlišovat pomocí $_SERVER['HTTP_HOST']:
if (preg_match('#^m\.#', $_SERVER['HTTP_HOST'])) {
...
}
Testovaní
Jak ověřit, že všechno funguje, jak má? Nejsnazší je vzít do ruky mobil a adresu vyťukat. Další možností je rozběhnout nějaký emulátor na počítači, třeba pro Android.
Funguje také doplněk User Agent Switcher pro Firefox, který se dokáže identifikovat jako libovolný prohlížeč. Vzhled díky tomu moc neotestujete, tak alespoň to rozpoznávání.
Všelijaké online emulátory fungují velice pochybně.