Skip to main content

Jak wykrywać urządzenia mobilne uderzające w twoje strony internetowe

Smartfon z plazy ! WYZWANIE "30" (odc.18) (Kwiecień 2025)

Smartfon z plazy ! WYZWANIE "30" (odc.18) (Kwiecień 2025)
Anonim

Od lat eksperci twierdzą, że ruch na stronach internetowych odwiedzających na urządzeniach mobilnych gwałtownie rośnie. Z tego powodu wiele firm mądrze zaczęło wykorzystywać strategię mobilną do swojej obecności w Internecie, tworząc doświadczenia dostosowane do telefonu i innych urządzeń mobilnych.

Gdy poświęcisz czas na naukę projektowania stron internetowych na telefony komórkowe i wdrażanie strategii, będziesz również chciał się upewnić, że użytkownicy Twojej witryny zobaczą te projekty. Jest wiele sposobów na zrobienie tego, a niektóre działają lepiej niż inne. Oto metoda, dzięki której możesz wdrożyć mobilne wsparcie na swoich stronach internetowych - wraz z rekomendacją na koniec, jaka jest najlepsza metoda osiągnięcia tego celu w dzisiejszej sieci!

Podaj link do innej wersji witryny

Jest to zdecydowanie najłatwiejsza metoda postępowania z użytkownikami telefonów komórkowych. Zamiast martwić się, czy mogą lub nie mogą zobaczyć twoich stron, po prostu umieść link gdzieś w górnej części strony, który wskazuje na oddzielną mobilną wersję Twojej strony. Następnie czytelnicy mogą samodzielnie wybrać, czy chcą zobaczyć wersję mobilną, czy kontynuować "normalną" wersję.

Zaletą tego rozwiązania jest to, że jest łatwy do wdrożenia. Wymaga to utworzenia zoptymalizowanej wersji dla urządzeń przenośnych, a następnie dodania linku gdzieś w górnej części normalnych stron witryny.

Wady:

  • Musisz utrzymywać osobną wersję strony dla użytkowników mobilnych. W miarę powiększania witryny możesz zapomnieć o utrzymaniu tej drugiej wersji, a witryny mogą się zsynchronizować.
  • Czy tworzysz również trzecią wersję tabletów? Co powiesz na czwartą wersję do noszenia? Ta koncepcja wersji specyficznych dla urządzenia może bardzo szybko wymknąć się spod kontroli.
  • Musisz umieścić na górze strony paskudny link, który widzą użytkownicy niewymagający mobilności (i prawdopodobnie klikają).

Ostatecznie to podejście jest przestarzałe, co raczej nie jest częścią nowoczesnej strategii mobilnej. Czasami używa się go jako rozwiązania typu "stop-gap fix", podczas gdy lepsze rozwiązanie jest rozwijane, ale w rzeczywistości jest to krótkoterminowa pomoc w zespole w tym momencie.

Użyj JavaScript

W wariancie wyżej wspomnianego podejścia, niektórzy programiści używają pewnego rodzaju skryptu wykrywającego przeglądarkę, aby wykryć, czy klient jest na urządzeniu mobilnym, a następnie przekierowuje go do tej oddzielnej witryny mobilnej. Problem z wykrywaniem przeglądarki i urządzeniami mobilnymi polega na tym, że istnieją tysiące urządzeń mobilnych. Próba wykrycia ich wszystkich za pomocą jednego skryptu JavaScript może zamienić wszystkie twoje strony w koszmar związany z pobieraniem - i nadal masz wiele takich samych wad, jak wyżej wymienione podejście.

Użyj CSS @media Handheld

Komenda CSS @media handheld wydaje się być idealnym sposobem wyświetlania stylów CSS tylko dla urządzeń przenośnych - takich jak telefony komórkowe. To wydaje się być idealnym rozwiązaniem do wyświetlania stron na urządzenia mobilne. Piszesz jedną stronę internetową, a następnie tworzysz dwa arkusze stylów. Pierwszy typ mediów "ekranowych" określa styl strony dla monitorów i ekranów komputerowych. Drugi dla "podręcznych" stylów strony dla małych urządzeń, takich jak te telefony komórkowe. Brzmi łatwo, ale tak naprawdę nie działa w praktyce.

Największą zaletą tej metody jest to, że nie musisz utrzymywać dwóch wersji swojej witryny. Po prostu zachowujesz ten, a arkusz stylów określa, jak powinien wyglądać - co faktycznie zbliża się do końcowego rozwiązania, które chcemy.

Problem z tą metodą polega na tym, że wiele telefonów nie obsługuje typu mediów - wyświetlają one swoje strony z typem ekranu. Wiele starszych telefonów komórkowych i urządzeń kieszonkowych nie obsługuje w ogóle CSS. Ostatecznie ta metoda jest niewiarygodna i dlatego rzadko jest używana do dostarczania mobilnych wersji strony internetowej.

Użyj PHP, JSP, ASP, aby wykryć User-Agent

Jest to znacznie lepszy sposób przekierowania użytkowników mobilnych do mobilnej wersji strony internetowej, ponieważ nie polega ona na języku skryptowym lub CSS, z których urządzenie mobilne nie korzysta. Zamiast tego używa języka po stronie serwera (PHP, ASP, JSP, ColdFusion itp.), Aby spojrzeć na klienta użytkownika, a następnie zmienić żądanie HTTP, aby wskazywał stronę mobilną, jeśli jest to urządzenie mobilne.

Prosty kod PHP w tym celu wyglądałby następująco:

stristr ($ ua, "Windows CE") lubstristr ($ ua, "AvantGo") lubstristr ($ ua, "Mazingo") lubstristr ($ ua, "Mobile") lubstristr ($ ua, "T68") lubstristr ($ ua, "Syncalot") lubstristr ($ ua, "Blazer")) {$ DEVICE_TYPE = "MOBILE";}if (isset ($ DEVICE_TYPE) i $ DEVICE_TYPE == "MOBILE") {$ location = 'mobile / index.php';header ("Location:". $ location);wyjście;}?>

Problem polega na tym, że istnieje wiele innych potencjalnych użytkowników, które są używane przez urządzenia mobilne. Ten skrypt będzie przechwytywał i przekierowywał wiele z nich, ale nie wszystkie w jakikolwiek sposób. A jeszcze więcej jest dodawanych przez cały czas.

Dodatkowo, podobnie jak w przypadku innych rozwiązań opisanych powyżej, musisz nadal mieć osobną witrynę mobilną dla tych czytelników! Ta wada posiadania dwóch (lub więcej!) Stron internetowych jest wystarczającym powodem, aby znaleźć lepsze rozwiązanie.

Użyj WURFL

Jeśli nadal jesteś zdecydowany przekierować użytkowników mobilnych do oddzielnej witryny, dobrym rozwiązaniem jest WURFL (Wireless Universal Resource File). Jest to plik XML (a teraz plik DB) i różne biblioteki DBI, które zawierają nie tylko aktualne bezprzewodowe dane użytkownika, ale także funkcje i możliwości obsługiwane przez te aplikacje.

Aby użyć WURFL, pobierz plik konfiguracyjny XML, a następnie wybierz swój język i zaimplementuj interfejs API w swojej witrynie. Istnieją narzędzia do korzystania z WURFL z Java, PHP, Perl, Ruby, Python, Net, XSLT i C ++.

Zaletą korzystania z WURFL jest to, że wiele osób aktualizuje i dodaje do pliku konfiguracyjnego przez cały czas. Podczas gdy plik, którego używasz, jest nieaktualny, niemal przed jego pobraniem, istnieje duże prawdopodobieństwo, że jeśli pobierzesz go raz w miesiącu, będziesz mieć wszystkie przeglądarki mobilne, z których twoi czytelnicy będą korzystać bez żadnych ograniczeń. problemy. Minusem jest oczywiście ciągłe pobieranie i aktualizowanie tego - wszystko po to, aby kierować użytkowników na drugą stronę internetową i na wady, które ją tworzą.

Najlepsze rozwiązanie to responsywny projekt

Więc jeśli utrzymywanie różnych witryn dla różnych urządzeń nie jest odpowiedzią, co to jest? Elastyczne projektowanie stron internetowych.

Projektowanie responsywne polega na używaniu zapytań o media CSS w celu definiowania stylów dla urządzeń o różnych szerokościach. Responsywny projekt pozwala utworzyć jedną stronę internetową dla użytkowników mobilnych i innych. Wtedy nie musisz się martwić, jakie treści wyświetlać w witrynie mobilnej lub pamiętaj, aby przenieść najnowsze zmiany do witryny mobilnej. Dodatkowo, po napisaniu CSS, nie musisz pobierać niczego nowego.

Responsywne wzornictwo może nie działać idealnie na bardzo starych urządzeniach i przeglądarkach (z których większość jest dziś bardzo mało używana i nie powinno być dla ciebie zbytnim zmartwieniem), ale dlatego, że są one addytywne (dodawanie stylów do treści, a nie przyjmowanie treści z dala) czytelnicy będą mogli nadal czytać twoją stronę, po prostu nie będą wyglądać idealnie na ich starym urządzeniu lub przeglądarce.