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:
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ć.
Mateusz Mazurek
