Extension for detecting mobile devices, managing mobile view types, redirect to mobile version for Nette Framework
This extension use Mobile_Detect class and provides the following features:
- Detect the various mobile devices by name, OS, browser User-Agent
- Manages site views for the variuos mobile devices (
mobile,tablet,full) - Redirects to mobile and tablet sites
The best way to install ipub/mobile-detect is using Composer:
{
"require": {
"ipub/mobile-detect": "dev-master"
}
}After that you have to register extension in config.neon.
extensions:
mobileDetect: IPub\MobileDetect\DI\MobileDetectExtensionPackage contains trait, which you will have to use in class, where you want to use mobile detector. This works only for PHP 5.4+, for older version you can simply copy trait content and paste it into class where you want to use it.
<?php
class BasePresenter extends Nette\Application\UI\Presenter
{
use IPub\MobileDetect\TMobileDetect;
}You have to add few lines in base presenter or base control in section createTemplate
<?php
class BasePresenter extends Nette\Application\UI\Presenter
{
protected function createTemplate($class = NULL)
{
// Init template
$template = parent::createTemplate($class);
// Add mobile detect and its helper to template
$template->_mobileDetect = $this->mobileDetect;
$template->_deviceView = $this->deviceView;
return $template;
}
}You can change default behaviour of your redirects with action parameter:
redirect: redirects to appropriate host with your current pathnoRedirect: no redirection (default behaviour)redirectWithoutPath: redirects to appropriate host index page
# Mobile detector
mobileDetect:
redirect:
mobile:
isEnabled: true # default false
host: http://m.site.com # with scheme (http|https), default null, url validate
statusCode: 301 # default 302
action: redirect # redirect, noRedirect, redirectWithoutPath
tablet:
isEnabled: false # default false
host: http://t.site.com # with scheme (http|https), default null, url validate
statusCode: 301 # default 302
action: redirect # redirect, noRedirect, redirectWithoutPath
detectTabletAsMobile: true # default false
switchDeviceView:
saveRefererPath: false # default true
# true => redirectUrl = http://site.com/current/path
# false => redirectUrl = http://site.comFor switch device view, use device_view GET parameter:
http://site.com?device_view={full/mobile/tablet}
In presenters or other services where you import mobile detector you could create calls like this
class SomePresenter extends Nette\Application\UI\Presenter
{
/**
* @var \IPub\MobileDetect\MobileDetect
*/
protected $mobileDetect
/**
* Some action with mobile detection
*/
public function someAction()
{
if ($this->mobileDetect->isMobile()) {
//...do whatever
}
}
}$mobileDetect->isMobile();
$mobileDetect->isTablet();
$mobileDetect->isPhone();is[iPhone|HTC|Nexus|Dell|Motorola|Samsung|Sony|Asus|Palm|Vertu|GenericPhone]
$mobileDetect->isIphone();
$mobileDetect->isHTC();
// etc.is[BlackBerryTablet|iPad|Kindle|SamsungTablet|HTCtablet|MotorolaTablet|AsusTablet|NookTablet|AcerTablet| YarvikTablet|GenericTablet]
$mobileDetect->isIpad();
$mobileDetect->isMotorolaTablet();
// etc.is[AndroidOS|BlackBerryOS|PalmOS|SymbianOS|WindowsMobileOS|iOS|badaOS]
$mobileDetect->isAndroidOS();
$mobileDetect->isIOS();
// etc.is[Chrome|Dolfin|Opera|Skyfire|IE|Firefox|Bolt|TeaShark|Blazer|Safari|Midori|GenericBrowser]
$mobileDetect->isChrome();
$mobileDetect->isSafari();
// etc.{isMobile}
<span>This content will be only on mobile devices....</span>
{/isMobile}
{isTablet}
<span>This content will be only on tablet devices....</span>
{/isTablet}
{isPhone}
<span>This content will be only on phone devices....</span>
{/isPhone}Available Latte macros:
{isMobile}....{/isMobile}
{isNotMobile}....{/isNotMobile}
{isTablet}....{/isTablet}
{isNotTablet}....{/isNotTablet}
{isPhone}....{/isPhone}
{isNotPhone}....{/isNotPhone}{isMobileDevice 'iPhone'}
<span>This content will be only on Apple iPhone devices....</span>
{/isMobileDevice}
<div n:isMobileDevice="iPhone">
<span>This content will be only on Apple iPhone devices....</span>
</div>{isMobileOs 'iOS'}
<span>This content will be only on mobile devices with iOS operating system....</span>
{/isMobileOs}
<div n:isMobileOs="iOS">
<span>This content will be only on mobile devices with iOS operating system....</span>
</div>With view type detector you could change your default layout in templates.
{isMobileView}
{layout '../Path/To/Your/Mobile/Device/@layout.latte'}
{/isMobileView}
{isTabletView}
{layout '../Path/To/Your/Tablet/Device/@layout.latte'}
{/isTabletView}
{isPhoneView}
{layout '../Path/To/Your/Phone/Device/@layout.latte'}
{/isPhoneView}
{isFullView}
{layout '../Path/To/Your/Full/View/@layout.latte'}
{/isFullView}
{isNotMobileView}
{layout '../Path/To/Your/Not/Mobile/Device/@layout.latte'}
{/isNotMobileView}