Każda przeglądarka ma swój własny znaczekDzięki temu na naszej stronie będziemy mogli określić, skąd pochodzi żądanie i z jakiej przeglądarki zostało wysłane, jak dobrze wiemy, przeglądarka Internet Explorer zawsze przyprawiała twórców stron o ból głowy (choć ostatnimi czasy poprawiono), ponieważ będziemy mogli Cię zidentyfikować i pokazać alternatywne zasady, aby rozwiązać te małe problemy.
Za służenie nam?Wyobraź sobie, że mamy stronę internetową taką jak Facebook, na którą codziennie wchodzą miliony osób, jednak nie wszyscy robią to z tego samego typu urządzeń, są ludzie, którzy wchodzą z komputera stacjonarnego, inni z tabletu, inni z telefonu komórkowego, itp. Każde urządzenie ma przeglądarkę (lub kilka) i posiada agenta, jeśli uda nam się go zidentyfikować, to możemy w odpowiedni sposób serwować treści, ponieważ wyświetlacz nie jest taki sam dla wszystkich, każde urządzenie będzie widziane w jeden sposób, a każda przeglądarka może interpretować reguły w inny sposób (chociaż jest to coraz niższe).
Omówiliśmy, że każda przeglądarka ma agenta, który pozwala nam ją zidentyfikować, poniżej znajduje się krótki opis Kod JavaScript, aby pobrać agenta przeglądarki gdzie jest używany:
Pobierz klienta użytkownikaDla wygody kod skryptu został osadzony w kodzie HTML. Jeśli otworzymy poprzedni kod w przeglądarce Google Chrome, zobaczymy:
POWIĘKSZAĆ
A jeśli teraz zrobimy to w Internet Explorerze:
POWIĘKSZAĆ
Sprawdziłeś, że został otwarty z systemu Windows, aby wykonać 2 poprzednie przechwyty, jeśli otworzymy go z Mozilla Firefox w systemie Linux, zobaczymy:
Jeśli chcesz kod w języku dla serwera, poniżej znajduje się kod do zobaczenia jak zdobyć agenta w PHP, pamiętaj, że JavaScript ma możliwość wyłączenia go przez użytkownika:
Przejdziemy teraz do tego, co nas najbardziej interesuje, w tym celu zaczniemy od przykładu tego, co omówiliśmy do tej pory na naszej stronie: Solvetic.
Sprawdzanie Solvetic
Jeśli wejdziemy do Solvetic z naszego komputera, korzystając z przeglądarki Google Chrome zobaczymy następujący aspekt, kompletny, na pierwszy rzut oka widzimy wszystko szeroko, obszar do logowania i rejestracji:
Ale jeśli wejdziemy z Google Chrome na komórce z Androidem, to oczywiście nie wszystkie treści trafiają na ekran, to jest coś, co trzeba brać pod uwagę, nie jest zbyt przyjemnie trzeba przesuwać palcem, aby zobaczyć części screen (niewiele stron na szczęście jest takich w dzisiejszych czasach), poniżej zostawiam obrazek jak Solvetic wygląda na telefonie komórkowym:
Jak widzimy, dostosowuje się do ekranu, teraz mamy menu u góry, jeśli klikniemy po lewej stronie (3 paski) zobaczymy opcje przejścia do artykułów, tutoriali itp.
A jeśli klikniemy na ikonkę po prawej (aspekt przycisku włącz/wyłącz) mamy opcje logowania lub rejestracji.
Teraz zobaczymy sposób na uzyskanie strony, która ma być obsługiwana, w zależności od urządzenia, które nas odwiedza.
Jak osiągnąć wynik?
Sposobów na osiągnięcie tego wyniku jest kilka, są skrypty, które są umieszczane bezpośrednio w aplikacji lub mamy też frameworki takie jak Bootstrap, ale podobny wynik możemy osiągnąć również z Nginx, ponieważ rozpoznając agenta przeglądarki możemy zrobić przepisanie i wysłać do użytkownika do innej części aplikacji bez zmiany adresu URL, który widzi.
Jeśli chcesz poznać Nginx, zostawiamy link poniżej, skąd możesz go również pobrać:
Aby to osiągnąć musimy najpierw zidentyfikować agenta przeglądarki, jeśli jest to jeden z tych, do których chcemy wprowadzić regułę używamy prostego warunku i stosujemy do niego regułę, wszystko to robimy w naszym bloku lokalizacji.
Spójrzmy na poniższy przykładowy kod, aby to osiągnąć, możesz zobaczyć, jak jest krótki:
lokalizacja / {if ($ http_user_agent ~ * '(iPhone | iPod)') {przepisz ^. + http://m.example.com/$uri; }}}Jak widzimy w kodzie, identyfikujemy agenta przeglądarki, jeśli odpowiada on wyznaczonemu przez nas (w tym przypadku iPhone lub iPod) przepisujemy, można to zrobić tak szeroko lub szczegółowo, jak wymaga tego nasza logika, dla przykład łatwiej jest zrozumieć tylko z jednym warunkiem.
Jak widać, dość łatwo jest zidentyfikować agenta przeglądarki, a jeszcze łatwiej jest użyć tego na naszą korzyść, jak wspomnieliśmy wcześniej, musimy mieć jasne wyobrażenie o tym, co chcemy zrobić, aby korzystać z narzędzia i uzyskaj pożądane korzyści.
Na zakończenie samouczka skomentuj, że dzięki responsywnemu projektowi osiągniesz, że wygląd Twojej strony internetowej dopasuje się do ekranu urządzeń bez dalszych komplikacji.
