MobileDetect – detekce mobiliních zařízení

Instalace klasicky přes composer

{
    "require": {
        "ipub/mobile-detect": "dev-master"
    }
}

nebo

$ composer require ipub/mobile-detect:@dev

Poměrně dost info jsem shrnul v readme na gitu, tak snad bude vše jasné.

Editoval akadlec (24. 4. 2014 9:27)

Jop taky sem si toho všim ;)

@sKopheK: pro samotnou detekci to využívá knihovnu která je poměrně solidně aktualizována. Responzivní web se nehodí vždy a všude.

No teoreticky by se v eventu mohly uprvit podminky a pokud si user setne verzi tak by mu ji mělo načítat.
Teď je to uděláno tak že pokud máš mobil a máš aktivní přesměrování na mobilní verzi, tak tě to přepne na url mobilní verze vždy.

Pokud ovšem nepoužíváš mobilní url, ale jen měníš layout tak si to ukládá jaký view máš aktuálně zvolen. Takže pokud přijde z mobilu na nemobilní verzi (bez přesměrování) tak si to do cookies uloží info že bys měl mít mobilní view. Info o tom pak budeš mít v tom helperu deviceView a nebo přímo v latte makrech. Pokud provedeš změnu pomocí služby deviceView tak si to změni cookie a můžeš na mobilu vidět i nemobilní nebo tablet verzi.

Jako chtělo by to zvážit jak by se to mělo chovat a podle toho se to může upravit. Já to přimárně potřeboval pro detekci mobilního zařízení abych mohl změnit template komponenty. No ještě by mi bodlo vědět jak velké rozlišení má user k dispozici ale to udělám asi extra.

Zax: Preferuji v nekoiak pripadech radeji mobilni verzi nez responsive. Responsive resi jen preskladani ale ty data si stejne stahuje. napriklad mam nejaky pravy sidebar, ktery je nesmyslny mit na malem rozliseni jako je mobil. No a prenaset takovy sidebar na mobilnim internetu muze byt nekdy az zbytecny porod, a uzivatele s FUPem ti nepodekuji. Ostatne proc maji velke zrpavodajske portaly typu idnes, ihned apod pord mobiln iverze a ne responsives

To je sice fakt, ale i když máš mobilní verzi, tak se pořád hodí udělat full verzi responzivně. Responzivní weby totiž nejsou responzivní jen kvůli různým druhům přístrojů, ale i kvůli různým způsobům používání prohlížeče.

Představ si, že máš jen jeden monitor a z nějakého důvodu potřebuješ něco na netu a prohlížeč si chceš zobrazit v úzké nudli (typicky abys měl na očích nějaký program, ve kterém zrovna pracuješ). Proč by se ten obsah neměl přeskládat tak, abys nemusel scrollovat do stran?
Nebo máš nějakého seniora, který používá nějakou prehistorickou obrazovku 800×600 jenže ouha, tvůj web je optimalizovaný pro 1024×768 a chudák stařík aby se naučil používat vodorovný scrollbar.
Nebo naopak máš někoho s obří obrazovkou s nějakým brutálním rozlišením, tak proč mu nepřeskládat informace nějak horizontálněji, aby se ta plocha využila?

Ono to ani není nijak moc nákladnější na vývoj, stačí si udělat pár webů responzivně a pak už to jde úplně samo a přínos to má myslím si dost velký, byť jde třeba jen o jednotky procent návštěvníků.

EDIT: nicméně sidebar bych asi řešil třeba tím, že bych použil ten detector a jednoduchou podmínkou bych ho buď vykreslil nebo nevykreslil :-) Nechci, aby z mého příspěvku nějak vyplynulo, že tvůj detector sucks, mobile version sucks nebo tak něco, jenom si myslím, že responzivní weby se hodí všude ;-)

Editoval Zax (24. 4. 2014 23:25)

@Tomáš Kolinger: Co máš na mysli? Načítání obrázků se správnou velikostí kvůli úspoře dat nebo prostě jen ten fakt, že obrázek musíš dát do divu a napsat pár řádků css (což dost často musíš tak jako tak)? S tím načítáním souhlasím že je to složitější, ale určitě ne o moc víc než celá mobilní verze a pokud už máme mobilní verzi, tak nás to ani vůbec trápit nemusí a můžeme v responzivní verzi klidně načítat plnou kvalitu.

Sorry že tu tak flejmuji, ale já si musím responzivní design hájit. Mobilní verzi nijak neodsuzuji, jen si myslím, že existence mobilní verze není dostatečný důvod se na responzivnost úplně vyprdnout, protože to není jenom o tom, že se to zobrazí i na mobilu. Je to o tom, že se to zobrazí i když je člověk na PC a otevře si to v úzké nudli (a určitě přitom nebude lozit někde v patičce a hledat odkaz na mobilní verzi).

Ahoj.. predovšetkým vďaka za super rozšírenie. Testoval som ho na čistom sandboxe aktuálnej verzie Nette 2.1.2. Detekcia funguje pekne, akurát som narazil na problém pri zmene device_view prostredníctvom GET parametru. Napríklad: ?device_view=full … Vznikne tento problém:

Possible problem: you are sending a HTTP header while already having some data in output buffer. Try OutputDebugger or start session earlier.

Otázka znie: Čo som spravil blbo? ..resp na čo som zabudol?

akadlec napsal(a):

@Yess: Ta chyba se ti objeví kdy? Mělo by to fungovat tak že se provede změna cookie na tebou zvolený view a provede se redirect.

Tak cookie sa zmení, ale pred tým redirectom to pravdepodobne krachne.

akadlec napsal(a):

Nemáš tam ještě něco přidáno či poměněno? Zkusil sem to v čistém sandboxu jak na homepage tak i na podstránce a provede se to korektně bez chyby. Jaký máš config?

Takže stiahol som čistý sandbox. Cez composer som nainštaloval podľa Git-u rozšírenie („ipub/mobile-detect“: „dev-master“). Podľa návodu na GitHube som pokraačoval ďalej samozrejme .. prihodil som do configu extension a v BasePresenteri mám len ten trait a funkciu createTemplate. Skúšal som detekciu zariadenia, čo funguje OK, takže toto by malo byť všetko vporiadku.

V configu mám momentálne toto:

# Mobile detector
mobileDetect:
	redirect:
		mobile:
			isEnabled: true
			statusCode: 301
			action: noRedirect
		detectTabletAsMobile: true
	switchDeviceView:
		saveRefererPath: true

a ešte do session som prihodil

autoStart: smart

akadlec napsal(a):

Hmm a ten error ti vyhodila laděnka? Můžeš zkusit vyhodit ten autoStart pro session? Případně někde nahodit tvůj sandbox? Mě se to totiž stále nedaří reprodukovat.

Hodil som to komplet na Github

O víkendu jsem nestíhal, zkusím kouknout dneska.

Asi máš pravdu…pokiaľ niesom na locale, tak to už funguje super

Editoval Yess (28. 4. 2014 16:19)

ne protože se nepodařila reprodukovat.

@akadlec tak jsem se až teď dostal k té mobilní verzi. Nakonec jsem se rozhodl, že půjdu cestou, že podle zařízení pošlu konkrétní šablonu. Jde nějak rozumně udělat, že budu mít například šablonu homepage.latte a pro mobilní verzi se bude sahat na homepage.mobile.latte – ci neco podobného? Nepřijde mi moc ideální udělat jednu šablonu a tam ifovat.

Díky za tip. Je nějaké obdobné řešení i pro komponenty? Předpokládám, že tam asi bude nejlepší nastavovat šablonu přes nějaky BaseControl, který se vždy podívá, zda nejde o mobil, či pod. nebo něco lepšího?

Detekce funguje skvěle, ale bohužel funkce isMobile/isNotMobile nedělá to co jsem si myslel, že má dělat a to je detekce (pouze) mobilního telefonu. Tablet je brán totiž také jako mobilní zařízení.

Nešlo by přidat funkci jenom pro mobilní telefony? Jde mi hlavně o latte makra. Mohla by se jmenovat klasicky isPhone/isNotPhone.

akadlec:
podle mě není zbytečné. Tablet a desktop mají větší display a tak můžou zobrazovat stejné věci a také mají obecně lepší připojení k internetu. Na druhou stranu mobil je většinou připojený přes 3G síť, na které je fup a je pomalejší než třeba wifi. Proto se hodí něco nezobrazovat jenom pro mobily.

Třeba já osobně mám stránky, na kterých je anketa, lišta s tlačítky typu sdílet na FB, G+ apod a sloupec ve kterém jsou poslední komentáře. Jsou to vcelku užitečné věci, ale ne až tak moc, abych kvůli tomu zatěžoval stránky na mobilech. Takže to chci jenom na desktopu a tabletu.

Mohl by se tam prosím ještě dát i to isNotPhone?

Díky moc.

Hele dělá to nette/http a jeho metoda redirect a zatím tedy nevím proč, tahle extension si redirect sama nikde nevolá.

Tak beru zpět…zřejmě je potřeba ukončit běh natvrdo aby se redirect provedl…

Editoval akadlec (7. 1. 2015 15:46)

Skvělé! Perfektní doplněk.
Díky za něj :)

Ještě by to chtělo trochu opravit dokumentaci…

Snažím se použít rozšíření v presenteru $this->mobileDetect->isMobile(), ale po projití dokumentace atd je $this->mobileDetect stále NULL…

Už jsem na to přišel, v dokumentaci je toto:

/** @var \IPub\MobileDetect\MobileDetect */
protected $mobileDetect

Doplnil jsem si @inject, středník, ale ještě bylo třeba dát proměnnou public. To mě nenapadlo…

Ahoj,
díky za super doplněk.

Mám jen takovou drobnost. Trochu se tam bije označení. Chci úplně jednoduchou věc, přepínat z notMobileView na mobileView. Očekával bych, že v makrech bude fungovat isMobileView a opakem bude isNotMobileView. Ale to není pravda, protože když přepnu na FULL view, tak makro isNotMobileView mi hodí false, takže musím dát isFullView. Jenže isFullView nefunguje u klasického desktopu (když ještě neznovolím žádný view), protože $this->deviceView->getViewType() mi vrátí ‚not_mobile‘.

Podle mě jsou tam zbytečně 2 stavy, které se vlastně kdyjí: ‚not_mobile‘ a ‚full‘. A nebo musí být doladěna podmínka pro makro isNotMobileView, protože isFullView patří do podmnožiny isNotMobileView.