This plugin introduces mobile detection.

Table of Contents:

• About
• Installation and Updates
• Twig Functions
• Usage
  • mobile_detect
  • isMobile
  • library_version
  • getUserAgent
  • getHttpHeaders
  • mobileGrade
  • isUserAgent
  • version
• Disclaimer
• Troubleshooting
• Contributing
• License
• Thanks

Grav Mobile Detect Plugin

The Grav Mobile Detect Plugin for Grav adds the ability to detect mobile devices (including tablets). It uses the User-Agent string combined with specific HTTP headers to detect the mobile environment.

This plugin use PHP class Mobile Detect project

Installation and Updates

The Grav Mobile Detect Plugin is easy to install with GPM.

$ bin/gpm install mobile-detect

Or clone from GitHub and put in the user/plugins/mobile-detect folder.

For more informations, please check the Installation and update guide.

Twig Functions

Twig functions	Docs	Return
{{ isMobile() }}	Detect if is Mobile	bool
{{ isTablet() }}	Detect if is Tablet	bool
{{ isDesktop() }}	Detect if is Desktop	bool
{{ library_version() }}	Get the current script version.	string
{{ mobile_detect() }}	Detect device type	string: tablet, phone or desktop
{{ mobileGrade() }}	Retrieve the mobile grading	string: A, B or C
{{ getUserAgent() }}	Retrieve the User-Agent	string
{{ getHttpHeaders() }}	Retrieves the HTTP headers	array
{{ isUserAgent($property) }}	Checks for a certain property in the userAgent	bool

Usage

Inside content files.

Using as part of logic

Examples :

Using {{ mobile_detect() }} as part of an {% if %} statement:

{% if mobile_detect() == 'desktop' %}
    do something
{% else %}
    do something else
{% endif %}

or using {{ isMobile() }}

{% if isMobile() %}
    do something
{% else %}
    do something else
{% endif %}

Get Mobile Detect library version number

{{ library_version() }}

Example Output for {{ library_version() }}

2.8.22

Retrieve the User-Agent

{{ getUserAgent() }}

Example Output for {{ getUserAgent() }}

Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1

Retrieves the HTTP headers

<ol>
{% for key,value in getHttpHeaders() %}
 <li>{{ key }} : {{ value }}</li>
{% endfor %}
</ol>

Example Output for {{ getHttpHeaders() }}

1. HTTP_HOST : MY-WEBSITE
2. HTTP_CONNECTION : keep-alive
3. HTTP_CACHE_CONTROL : max-age=0
4. HTTP_UPGRADE_INSECURE_REQUESTS : 1
5. HTTP_USER_AGENT : Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36
6. HTTP_ACCEPT : text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
7. HTTP_ACCEPT_ENCODING : gzip, deflate, sdch
8. HTTP_ACCEPT_LANGUAGE : fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4
9. HTTP_COOKIE : XXXXXXXX

Retrieve the mobile grading

{{ mobileGrade() }}

Example Output for {{ mobileGrade() }}

A

What is mobile grading ?

We use a 3-level graded browser support system: A (full), B (full minus Ajax), C (basic HTML). The visual fidelity of the experience and smoothness of page transitions are highly dependent on the CSS rendering capabilities of the device and platform so not all A grade experience will be pixel-perfect but that’s the nature of the web.

Quoted from jQuery Mobile

Graded Browser Support jQuery Mobile

List of User Agent for {{ isUserAgent($property) }}

Twig functions	Agent	Return
{{ isUserAgent('iOS') }}	iOS	bool
{{ isUserAgent('Webkit') }}	Webkit	bool
{{ isUserAgent('BlackBerry') }}	BlackBerry	bool
{{ isUserAgent('Firefox') }}	Firefox	bool
{{ isUserAgent('Chrome') }}	Chrome	bool
{{ isUserAgent('AndroidOS') }}	AndroidOS	bool
{{ isUserAgent('Skyfire') }}	Skyfire	bool
{{ isUserAgent('Opera') }}	Opera	bool
{{ isUserAgent('MeeGoOS') }}	MeeGoOS	bool
{{ isUserAgent('Tizen') }}	Tizen	bool
{{ isUserAgent('Dolfin') }}	Dolfin	bool
{{ isUserAgent('UC Browser') }}	UC Browser	bool
{{ isUserAgent('NookTablet') }}	NookTablet	bool
{{ isUserAgent('SymbianOS') }}	SymbianOS	bool
{{ isUserAgent('Kindle') }}	Kindle	bool

You can mix :

{% if isUserAgent('Chrome') and isUserAgent('AndroidOS') %}
    do something
{% else %}
    do something else
{% endif %}

Get the version of the given property in the User-Agent

{{ version('Android') }}

Example Output for {{ version('Android') }}

5.0

List of property in User Agent for {{ version($property) }}

Property
Mobile	IE	Skyfire	Windows Phone OS
Build	NetFront	Tizen	Windows Phone
Version	NokiaBrowser	Webkit	Windows CE
iPad	Opera	PaleMoon	Windows NT
iPhone	Opera Mini	Gecko	Symbian
iPod	Opera Mobi	Trident	webOS
Kindle	UC Browser	Presto	VendorID
Chrome	MQQBrowser	Goanna
Coast	MicroMessenger	iOS
Dolfin	baiduboxapp	Android
Firefox	baidubrowser	BlackBerry
Fennec	Iron	BREW
Edge	Safari	Java

WARNING: this method is in BETA, some keyword properties will change in the future. For instance : #376

Troubleshooting

Grav CMS Cache + Mobile Detect Conflict see #1

If you find a bug, please open a new issue

Disclaimer

I've 'written' this plugin for my own use. It comes without any guarantee, so your mileage may vary in using it. If you find bugs or have great additions you'd like to share, use github to fork the project and share your improvements by initiating pull request

Tested on Grav

Contributing

You can contribute at any time! Before opening any issue, please search for existing issues and review the guidelines for contributing.

After that please note:

• If you find a bug, would like to make a feature request or suggest an improvement, please open a new issue. If you have any interesting ideas for additions to the syntax please do suggest them as well!
• Feature requests are more likely to get attention if you include a clearly described use case.
• If you wish to submit a pull request, please make again sure that your request match the guidelines for contributing and that you keep track of adding unit tests for any new or changed functionality.

See also the list of contributors who participated in this project.

Licence

See Licence

Thanks

serbanghita/Mobile-Detect

haikulab/statamic-mobile-detect

Sommerregen/grav-plugin-shortcodes

getgrav/grav