How to Detect mobile device on hubl coding?

Develop, Build & Integrate CMS Development
1

{{request.headers[‘user-agent’]}} this variable showing so much information.Can any one help me on this.

2

@prasadcolumbus I recommend either using Smart Content if you need to figure this out server side. Otherwise, you can do this client side fairly easily with either CSS media queries to show/hide specific things on mobile or desktop or use JS Match Media to change interaction of things on mobile/desktop.

3

Hey @prasadcolumbus

Thats expression really shouldn’t return a value that’s very large at all, ~120-150 characters with spaces.

Take a look at [this resource](http://Mozilla/5.0%20(Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36) regarding the possible values it can return.

I wonder if you could do somehting like:

{% set agent = request.headers['user-agent']|lower|split(" ") %}

{% set isMobile = agent.index("mobile") > -1 ? true : false %}

Obviously this will need more research as I’m not familiar enought with the user agents to know if it alwyas contains " mobile".

Thoughts?

4

Thank you so much @Kevin-C it’s working

5

Hello Kevin,
I am getting isMobile = true for Android but not on iOS phones. What do you think the issue is?
Thank you in advance,
George

6

Found it.
The agent value is different from a mobile to another. So splitting it doesn’t work. Therefore I went for this solution below:
{% set agent = request.headers[‘user-agent’]|lower|string %}
{% set is_mobile = false %}
{% if agent is string_containing “mobile” %}
{% set is_mobile = true %}
{% endif %}
Thank you.

7

@georgemarket8 ,

thanks for adding your solution to the post :grinning_face:

georgemarket8 8

:grin:

9

Hey! where exactly I place this code? Should I add this to my forms? Sorry not a developer lol

10

Heyy!
You can play with the below code in a custom module that you create:
{% set agent = request.headers[‘user-agent’]|lower|string %}
{% set is_mobile = false %}

YOUR DESKTOP CONTENT GOES HERE…
{% if agent is string_containing “mobile” %}
{% set is_mobile = true %}

YOUR MOBILE CONTENT GOES HERE…
{% endif %}