Každý prohlížeč má své vlastní razítkoDíky tomu budeme na našich stránkách schopni identifikovat, odkud žádost pochází a ze kterého prohlížeče byla podána, jak dobře víme, prohlížeč Internet Explorer vždy vyvolával bolesti hlavy pro webové vývojáře (i když v poslední době má vylepšeno), protože vás budeme moci identifikovat a ukázat alternativní pravidla k řešení těchto malých problémů.
Za to, že nám slouží?Představte si, že máme web, jako je Facebook, kam denně vstupují miliony lidí, ale ne všichni to dělají ze stejného typu zařízení, existují lidé, kteří vstupují ze svého stolního počítače, jiní z tabletu, další z mobilu, atd. Každé zařízení má prohlížeč (nebo několik) a má agenta, pokud jej dokážeme identifikovat, pak můžeme obsah vhodným způsobem obsluhovat, protože zobrazení není pro všechny stejné, každé zařízení bude viděno jedním způsobem, a každý prohlížeč může interpretovat pravidla jiným způsobem (i když je to stále nižší a nižší).
Diskutovali jsme o tom, že každý prohlížeč má agenta, který nám umožňuje jej identifikovat, níže je stručný JavaScriptový kód pro získání agenta prohlížeče kde se používá:
Získejte user-agentKód skriptu byl pro pohodlí vložen do HTML. Pokud otevřeme předchozí kód v prohlížeči Google Chrome, uvidíme následující:
ZVĚTŠIT
A pokud to nyní uděláme v aplikaci Internet Explorer:
ZVĚTŠIT
Ověřili jste, že byl otevřen z Windows, aby pořídil 2 předchozí zachycení, pokud jej otevřeme z Mozilla Firefox v Linuxu, uvidíme následující:
Pokud chcete kód v jazyce pro server, níže je kód k vidění jak získat agenta v PHP, pamatujte, že JavaScript je možné, aby jej uživatel deaktivoval:
Nyní přejdeme k tomu, co nás zajímá nejvíce, proto začneme tím, že se podíváme na příklad toho, o čem jsme zatím s naší stránkou diskutovali: Solvetic.
Kontrola Solvetic
Pokud zadáme Solvetic z našeho počítače, pomocí prohlížeče Google Chrome uvidíme následující aspekt, kompletní, na první pohled vidíme vše široké, oblast pro přihlášení a registraci:
Pokud ale vstoupíme z prohlížeče Google Chrome na mobilním telefonu Android, samozřejmě se na obrazovku nedostane veškerý obsah, je to něco, co je třeba vzít v úvahu, není příliš příjemné muset posouvat prstem, abyste viděli části obrazovka (v dnešní době je naštěstí jen málo stránek), níže nechávám obrázek toho, jak Solvetic vypadá na mobilu:
Jak vidíme, přizpůsobuje se obrazovce, nyní máme nabídky nahoře, pokud klikneme na levou stranu (3 pruhy), zobrazí se nám možnosti přejít na články, návody atd.
A pokud klikneme na ikonu vpravo (aspekt tlačítka zapnutí / vypnutí), máme možnosti přihlášení nebo registrace.
Nyní uvidíme způsob, jak zajistit zobrazení stránky v závislosti na zařízení, které nás navštíví.
Jak dosáhnout výsledku?
Existuje několik způsobů, jak dosáhnout tohoto výsledku, existují skripty, které jsou umístěny přímo v aplikaci, nebo máme také rámce, jako je Bootstrap, ale můžeme také dosáhnout podobného výsledku z Nginx, protože rozpoznáním agenta prohlížeče můžeme přepsat a odeslat uživateli do jiné části aplikace beze změny adresy URL, kterou vidí.
Pokud chcete znát Nginx, zanecháváme níže uvedený odkaz, kde si jej můžete také stáhnout:
Abychom toho dosáhli, musíme nejprve identifikovat agenta prohlížeče, pokud je to jeden z těch, pro které chceme zadat pravidlo, použijeme jednoduchou podmínku a použijeme na něj pravidlo, to vše uděláme v našem bloku polohy.
Podívejme se na následující ukázkový kód, abychom toho dosáhli, můžete vidět, jak je krátký:
umístění/{if ($ http_user_agent ~ * '(iPhone | iPod)') {rewrite ^. + http://m.example.com/$uri; }}}Jak vidíme v kódu, identifikujeme agenta prohlížeče, pokud odpovídá tomu, kterého jsme určili (v tomto případě iPhone nebo iPod) provedeme přepsání, lze to provést tak široce nebo specificky, jak vyžaduje naše logika, příklad je snáze pochopitelný pouze s jednou podmínkou.
Jak vidíme, je docela snadné identifikovat agenta prohlížeče a ještě snazší je použít to v náš prospěch, jak jsme již zmínili, musíme mít jasnou představu o tom, co chceme dělat, abychom mohli používat nástroje a získejte požadovaný užitek.
Na závěr tutoriálu poznamenejte, že pomocí responzivního designu dosáhnete toho, že se vzhled vaší webové stránky přizpůsobí obrazovce zařízení bez dalších komplikací.
