Jak wykryć że użytkownik korzysta z urządzenia mobilnego?

Dzień dobry :)

Tworzyłem ostatnimi czasy wersję mobilną mojego portalu rap-cytaty.com – dziś już portal posiada pełnoprawnie działającą wersję na urządzenia przenośne o małych rozdzielczościach (telefony, iPhony itp).

Sama idea wersji mobilnej jest dość oczywista – strona ma być lekka, bez wodotrysków i innych rzeczy które moga obciążać stronę. Witryna ma być przejrzysta i funkcjonalna. Dostosowana graficznie do małych wyświetlaczy. Uważać nalezy na JS, gdyz nie każdy telefon obsługuje (moja Nokia E75 radzi sobie bez problemu.). W sumie teraz większość osób, które korzystają z Internetu w telefonie maja na tyle nowoczesne modele – że nie sądzę żeby JS było problemem. Tak czy siak – warto ograniczać użycie tej technologii. Sądzę że i tak (x)HTML i CSS w zupełności wystarczą.

Ale w sumie tutaj nie o tym.

Napisałem sobie witrynę. Spełnia ona wymogi witryny mobilnej (moim zdaniem spełnia). No i teraz wypadałoby zrobić przekierowanie na wersję mobilną, gdy uzytkownik wejdzie na stronę z urządzenia mobilnego…

No i teraz możemy to zrobić łatwo – dodając na strone podstawowej (przeznaczonej dla komputerów) inny styl CSS, który obcina wodotryski. Ale zrobić tak jak ja – stworzyć inną stronę, np na subdomenie.

No dobra, ale witrynę mamy już zrobioną. Jak zrobić żeby wykryć użytkownika wchodzącego z urządzenia mobilnego. Można kombinować z rozdzelczościami… Tzn dać warunek

1
2
3
4
5
6
7
if rozdzielczosc_szerokosc<800 and rozdzielczosc_wysokosc<600 then

przekieruj na strone mobilna

else

przekieruj na strone dla PC

to jest średnie rozwiązanie. Nie każdy model zwraca bez problemów rozdzielczość i nie zawsze jest to dobrze interpretowane.

Znacznie lepszym wyjsciem, którego ja użyłem jest zastosowanie darmowej bazy urządzen mobilnych, dostępnej w postaci aplikacji webowej napisanej w PHP.

Baza jest duża. Po instalacji to około 15MB w bazie danych MySql. Strona projektu jest dostępna pod adresem http://www.tera-wurfl.com/wiki/index.php/Main_Page

A ściągnąć paczkę możemy klikając na Download (po lewej) i ściągnąć dokładnie to co witać na screenie:

Kliknij aby powiększyć.
 

Gdy już mamy paczkę, wchodzimy w plik TeraWurflConfig.php.example – w nim wpisujemy dane do bazy danych i zmieniamy nazwę na TeraWurflConfig.php

Tak spreparowaną paczkę wrzucamy na ftp. Odpadamy /admin/install.php i gdy wszystko jest OK to kasujemy plik install.php i odpalamy /admin/ i widzimy panel który daje przede wszystim możliwość aktualizacji bazy danych. Aktualizacje najlepiej przeprowadzić ręcznie – ściągamy plik stąd -> http://sourceforge.net/projects/wurfl/files/WURFL/ wybieramy najnowszą wersję, ściągamy, wrzucamy na ftp do folderu data i odpalamy Update database from local file i reszta się sama zrobi.

No i spoko, mamy pokaźną bazę danych. Teraz wykorzystajmy ją do naszego celu – sprawdzenia czy użytkownik który akutalnie ogląda stronę widzi ją z komputera czy z urządzenia mobilnego…

1
2
3
4
5
6
7
8
9
require_once('TeraWurfl.php'); // wczytujemy sobie plik biblioteki
$wurfl = new TeraWurfl(); //tworzymy nowa instancje klasy
$matched = $wurfl->getDeviceCapabilitiesFromAgent($_SERVER['HTTP_USER_AGENT']);//przekazujemy

//user agenta do metody

if ($matched && $wurfl->getDeviceCapability("is_wireless_device")) { //sprawdzany czy jest to urzadzenie mobilne
header('Location: http://mobilnawersjastrony.pl'); // przekierowanie.
}

Taka metoda jest dużo bardziej wiarygodna. Robiłem testy i u mnie wykrywalność jest na poziomie 98% (kilkanaście telefonów z różnymi systemami i z różnych lat). Warto poświęcić tę chwilkę by mieć pewność że użytkownik zobaczy to, co powinien zobaczyć.

 

 

Dzięki za wizytę,
Mateusz Mazurek
Podziel się na:
    Facebook email PDF Wykop Twitter

Dodaj komentarz

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subskrybuj  
Powiadom o