Detekce mobilních zařízení

Martin Pešout

27 Zář 2011

V souvislosti s velkým rozmachem chytrých telefonů a tabletů v posledním roce vzniká na IT trhu poptávka po tvorbě mobilních webových stránek a aplikací. Pokud jste vývojář, tak při své práci určitě narazíte na potřebu detekce konkrétního zařízení. Nabízí se hned několik postupů, které lze použít. Jejich popisem bych se rád zabýval v následujícím článku.

Základní rozdělení

Co se týče samotné detekce zařízení, máme k dispozici dvě nejběžnější cesty:

Detekce na straně klienta
Detekce na straně serveru

Detekce na straně klienta

Moderní trendy týkající se vývoje webových stránek upřednostňují tento přístup. Obsah dokumentu se odděluje od jeho vzhledu. Výstup ze serveru je vždy jednotný a až dané zobrazovací zařízení (PC, mobil, tablet, …) rozhodne, jak předaná data správně zobrazit.

Protože se pro definici vzhledu v dnešní době ve většině případů používá kaskádových stylů (CSS), není divu, že s příchodem poslední verze CSS3 přichází i vylepšená podpora detekce mobilních zařízení. Můžeme tak snadno zjistit šířku prohlížeče a podle toho třeba omezit počet prvků na řádku. Snadno také zjistíme zda naše zařízení zobrazuje výstup černobíle nebo barevně. Nevýhodou však je, že některé starší prohlížeče si s tímto zápisem neporadí. Zde je malá ukázka zápisu:

/* široká obrazovka */
@media screen and (max-width: 1100px) {
  body {
    font-size: 100%;
  }
}
 
/* iPAD / střední šířka */
@media screen and (max-width: 768px) {
  body {
    font-size: 95%;
  }
 
  #main-wrapper aside {
    display: none;
  }
}
 
/* chytré telefony */
@media screen and (max-width: 420px) {
  body,
  #comments {     
    font-size: 85%;
  }
}
 
img,video,object {
  max-width: 100%;
}

Pro více informací bych Vás rád odkázal na zajímavé články, které se touto problematikou zabývají:

Pokud používáte hojně JavaScriptu, je možné velikost okna zjišťovat na straně prohlížeče i s použití jeho metod. Dále je tak možné zjistit i konkrétní typ prohlížeče. Zde jsou dvě ukázky použití:

Jak se můžete sami přesvědčit, není použití této metody tak čisté a přehledné, jak tomu bylo u kaskádových stylů.

Detekce na straně serveru

Další možností jak zjistit, zda používáme mobilní zařízení nebo klasické PC, je detekce přímo na straně serveru. Ze serveru pak už získáváme data přímo pro konkrétní zařízení. Určitě si položíte otázku, zda je v dnešní době tento přístup ještě dobrý používat? Já si osobně nemyslím, že je to ideální, nicméně se najdou situace, kdy se nám tento přístup hodí. Vyjmenuji aspoň některé:

Klient má starší web a předělání současného webu do CSS3 by bylo finančně náročné. Pro naše potřeby postačí zjistit, zda využíváme smartphone, tablet nebo klasické PC a rozhodnout se podle toho.
Chceme z jistého důvodu zjistit o daném zařízení co nejvíce informací a s těmi pak dále pracovat.
Píšeme webovou aplikaci, která musí pracovat s různou logikou pro různé zařízení již na serveru.

Všechny tyto přístupy fungují na podobném principu. Každé standardní zařízení předává HTTP hlavičku User-Agent. Ta vznikla k tomu, aby identifikovala prohlížeč, který právě přistupuje na stránku. Nicméně každá verze prohlížeče disponuje vlastní hlavičkou, což nám problematiku detekce vůbec neusnadňuje. Rozdíl je i v zařízení, z kterého přistupuji. Například když přistupuji z prohlížeče Chrome, tak má můj User-Agent následující tvar:

Mozilla/5.0 (X11; Linux i686) AppleWebKit/534.30 (KHTML, like Gecko) Chrome/12.0.742.12 Safari/534.30

Z prohlížeče Firefox dostanu tento User-Agent:

Mozilla/5.0 (X11; Linux i686; rv:6.0.2) Gecko/20100101 Firefox/6.0.2

Pokud přistupuji z iPhone, tak dostanu tento výsledek:

Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16

Teď si představte, že každé zařízení a prohlížeč disponují vlastním User-Agent. Dostáváme obrovské množství možností, které se navíc měsíc co měsíc rozrůstají. Naštěstí existují veřejné databáze existujících mobilních zařízení, které v sobě navíc mají obsažené všechny možné informace o daném hardware. My jim předáme pouze svůj User-Agent a zpátky dostaneme požadované informace. Asi nejznámější databází tohoto druhu je WURFL. Zde můžeme například vidět, jaké informace je možné získat o zařízení HTC Desire. Na webu je možné získat celou řadu knihoven spolupracující s touto databází, takže následná integrace je velice snadná.

Závěrem

Tvorba internetových stránek a aplikací zažívá v posledním roce veliký boom. Poptávka po mobilním webu ještě není taková, ale např. dle studie IDC můžeme minimálně v USA, očekávat již během pěti let přístup více uživatelů přes mobil než desktop.

Co se týče rozpoznávání mobilních zařízení na webu, tak určitě existují i další možnosti, než ty, které jsem zde uvedl. Já jsem se snažil nastínit pouze ty nejznámější. Pokud však znáte některé další, které stojí za zmínku, tak budu jen rád, když se o nich zmíníte v komentářích k tomuto článku.