Zaznavanje uporabnikovega okolja v Joomli s pomočjo DeviceDetect plugina

Za lastne potrebe smo razvili vtičnik (plugin) za Joomlo, s pomočjo katerega lahko zaznamo uporabnikov operacijski sistem (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo), orientacijo naprave (Portrait, Landscape) in pa tip naprave (tablični računalnik, mobilni telefon).

Vtičnik oz. kodo dobite tukaj: https://github.com/esedic/DeviceDetect

Vtičnik deluje zelo enostavno: v element vstavi CSS class, na podlagi katerega lahko zaženemo poljubno CSS ali Javascript kodo.

Primeri:

iPhone:

Android:

 

Podprte naprave:

• iOS: iPhone, iPod, iPad
• Android: telefoni & tablice
• Blackberry: telefoni & tablice
• Windows: telefoni & tablice
• Firefox OS: telefoni & tablice

 

Uporaba v CSS

CSS classi glede na zaznano napravo:

Naprava	CSS class-i
iPad	ios ipad tablet
iPhone	ios iphone mobile
iPod	ios ipod mobile
Android telefon	android mobile
Android tablica	android tablet
BlackBerry telefon	blackberry mobile
BlackBerry tablica	blackberry tablet
Windows telefon	windows mobile
Windows tablica	windows tablet
Firefox OS telefon	fxos mobile
Firefox OS tablica	fxos tablet
MeeGo	meego
Desktop PC	desktop

CSS classi glede na orientacijo ekrana:

Orientacija	CSS class-i
Ležeče	landscape
Pokočno	portrait

Uporaba v Javascript

Javascript metode glede na zaznano napravo

Naprava	Javascript metoda
Mobilni telefon	device.mobile()
Tablica	device.tablet()
Desktop PC	device.desktop()
iOS	device.ios()
iPad	device.ipad()
iPhone	device.iphone()
iPod	device.ipod()
Android	device.android()
Android telefon	device.androidPhone()
Android tablica	device.androidTablet()
BlackBerry	device.blackberry()
BlackBerry telefon	device.blackberryPhone()
BlackBerry tablica	device.blackberryTablet()
Windows	device.windows()
Windows telefon	device.windowsPhone()
Windows tablica	device.windowsTablet()
Firefox OS	device.fxos()
Firefox OS telefon	device.fxosPhone()
Firefox OS tablica	device.fxosTablet()
MeeGo	device.meego()

Javascript metode glede na orientacijo ekrana

Orientacija	Javascript metoda
Ležeče	device.landscape()
Pokončno	device.portrait()

Podrobnejša navodila najdete tukaj