This plugin introduces mobile detection.

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

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

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.

Inside content files.

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

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

{{ library_version() }}

2.8.22

{{ 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

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

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

{{ mobileGrade() }}

A

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

You can mix :

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

{{ version('Android') }}

5.0

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

Grav CMS Cache + Mobile Detect Conflict see #1

If you find a bug, please open a new issue

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

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.

See Licence

serbanghita/Mobile-Detect

haikulab/statamic-mobile-detect

Sommerregen/grav-plugin-shortcodes

getgrav/grav