Ve světě moderních technologií je důležité umět přizpůsobit svůj webový obsah různým zařízením, jako jsou počítače, tablety, chytré telefony a televizory. Internetové stránky a aplikace by měly být snadno použitelné a optimalizované pro konkrétní typ zařízení. Proto se určení typu zařízení stává důležitým aspektem vývoje.
Pomocí programovacího jazyka JavaScript můžete snadno určit typ zařízení, na kterém je vaše aplikace spuštěna nebo stažena. V tomto článku se podíváme na několik jednoduchých způsobů, jak určit typ zařízení pomocí JavaScriptu.
Jedním z nejjednodušších způsobů, jak zjistit typ zařízení v JavaScriptu, je kontrola šířky obrazovky. Šířka obrazovky může být užitečným ukazatelem typu zařízení, protože počítače a tablety mají obvykle větší velikost obrazovky než chytré telefony a mobilní zařízení. Můžete použít vlastnost window.innerWidth pro šířku obrazovky.
Kromě toho můžete zkontrolovat určité funkce nebo vlastnosti, které existují pouze na určitých typech zařízení. Chytré telefony a tablety mají například vestavěnou funkci určování geolokace, kterou lze použít k určení typu zařízení. Tuto funkci můžete zkontrolovat pomocí podmíněného příkazu if.
Metoda přes window.navigator.userAgent
Před použitím této metody se doporučuje seznámit se s různými hodnotami, které může mít vlastnost userAgent v různých prohlížečích a operačních systémech. Například v různých verzích prohlížeče Chrome může vlastnost userAgent vrátit následující hodnoty:
| Operační systém | Hodnota vlastnosti userAgent |
|---|---|
| Windows | Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 |
| MacOS | Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36 |
| Linux | Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36 |
Pomocí metody indexOf pro řetězec userAgent lze zkontrolovat, zda obsahuje určitá klíčová slova, která označují typ zařízení. Chcete-li například zjistit, že uživatel používá zařízení s operačním systémem Windows, můžete použít následující kód:
if (window.navigator.userAgent.indexOf("Windows") != -1)
Stejně tak je možné určit typ zařízení podle klíčových slov ve smyslu vlastnosti userAgent pro jiné operační systémy a prohlížeče.
Metoda pomocí window.innerWidth
Níže je tabulka s odhadovanými hodnotami šířky innerWidth a odpovídajícím typem zařízení:
| innerWidth | Typ zařízení |
|---|---|
| 1024 a více | Desktop |
| 768-1023 | Brašna |
| méně než 768 | Mobilní zařízení |
Pro určení typu zařízení založeného na window.innerWidth lze použít následující kód:
if (window.innerWidth >= 1024) else if (window.innerWidth >= 768) elseVšimněte si, že tyto hodnoty jsou předpokládané a mohou se lišit v závislosti na zařízení a prohlížeči uživatele.
Použití window.innerWidth je snadný a pohodlný způsob, jak určit typ zařízení v JavaScriptu, který může být užitečný při navrhování responzivních webových stránek nebo při psaní kódu přizpůsobeného různým platformám.
Metoda s kontrolou viewport
K určení typu zařízení pomocí kontroly viewport lze použít následující kód:
if (window.innerWidth < 768)
// kód pro mobilní zařízení
// kód pro desktopová zařízení
V tomto příkladu je hodnota 768 prahová šířka viewportu, pod kterou je zařízení považováno za mobilní. Tuto hodnotu můžete změnit podle svých potřeb.
Metoda ověřování viewport je snadný a pohodlný způsob, jak určit typ zařízení bez použití složitých algoritmů a knihoven.