topic Re: How to Detect mobile device on hubl coding? in CMS Development

How to Detect mobile device on hubl coding?

prasadcolumbus — Thu, 01 Oct 2020 09:28:32 GMT

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

Re: How to Detect mobile device on hubl coding?

stefen — Thu, 01 Oct 2020 18:45:20 GMT

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

Re: How to Detect mobile device on hubl coding?

Kevin-C — Fri, 02 Oct 2020 15:34:29 GMT

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?

Re: How to Detect mobile device on hubl coding?

prasadcolumbus — Mon, 05 Oct 2020 07:29:16 GMT

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

Re: How to Detect mobile device on hubl coding?

georgemarket8 — Mon, 25 Jan 2021 12:43:57 GMT

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

Re: How to Detect mobile device on hubl coding?

georgemarket8 — Mon, 25 Jan 2021 16:02:15 GMT

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.

Re: How to Detect mobile device on hubl coding?

dennisedson — Tue, 26 Jan 2021 15:07:19 GMT

@georgemarket8 ,

thanks for adding your solution to the post 😀

Re: How to Detect mobile device on hubl coding?

georgemarket8 — Fri, 12 Feb 2021 00:44:54 GMT

😁

Re: How to Detect mobile device on hubl coding?

linealves — Tue, 13 Jul 2021 18:17:58 GMT

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

Re: How to Detect mobile device on hubl coding?

georgemarket8 — Wed, 14 Jul 2021 18:00:31 GMT

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