How to Detect mobile device on hubl coding?

SOLVE
prasadcolumbus
Participant | Diamond Partner

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

0 Upvotes
2 Accepted solutions

Accepted Solutions
Kevin-C
Solution
Recognized Expert | Partner

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

View solution in original post

georgemarket8
Solution
Contributor | Platinum Partner

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.

View solution in original post

9 Replies 9
stefen
Key Advisor | Partner

@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.

Stefen Phelps, Community Champion, Kelp Web Developer
Kevin-C
Solution
Recognized Expert | Partner

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

View solution in original post

prasadcolumbus
Participant | Diamond Partner

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

0 Upvotes
georgemarket8
Contributor | Platinum Partner

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

0 Upvotes
georgemarket8
Solution
Contributor | Platinum Partner

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.

View solution in original post

dennisedson
Community Manager

@georgemarket8 ,

thanks for adding your solution to the post 😀

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
georgemarket8
Contributor | Platinum Partner

😁

linealves
Participant

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

0 Upvotes
georgemarket8
Contributor | Platinum Partner

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 %}