CMS Development

prasadcolumbus
Participante | Parceiro Diamante
Participante | Parceiro Diamante

How to Detect mobile device on hubl coding?

resolver

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

0 Avaliação positiva
2 Solução aceitas
Kevin-C
Solução
Especialista reconhecido(a) | Parceiro
Especialista reconhecido(a) | Parceiro

How to Detect mobile device on hubl coding?

resolver

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?

Kevin Cornett - Sr. Solutions Architect @ BridgeRev

Exibir solução no post original

georgemarket8
Solução
Colaborador(a) | Parceiro Platinum
Colaborador(a) | Parceiro Platinum

How to Detect mobile device on hubl coding?

resolver

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.

Exibir solução no post original

9 Respostas 9
Kevin-C
Solução
Especialista reconhecido(a) | Parceiro
Especialista reconhecido(a) | Parceiro

How to Detect mobile device on hubl coding?

resolver

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?

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
georgemarket8
Colaborador(a) | Parceiro Platinum
Colaborador(a) | Parceiro Platinum

How to Detect mobile device on hubl coding?

resolver

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 Avaliação positiva
georgemarket8
Solução
Colaborador(a) | Parceiro Platinum
Colaborador(a) | Parceiro Platinum

How to Detect mobile device on hubl coding?

resolver

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.

linealves
Participante

How to Detect mobile device on hubl coding?

resolver

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

0 Avaliação positiva
georgemarket8
Colaborador(a) | Parceiro Platinum
Colaborador(a) | Parceiro Platinum

How to Detect mobile device on hubl coding?

resolver

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

dennisedson
Equipe de Produto da HubSpot
Equipe de Produto da HubSpot

How to Detect mobile device on hubl coding?

resolver

@georgemarket8 ,

thanks for adding your solution to the post 😀

0 Avaliação positiva
georgemarket8
Colaborador(a) | Parceiro Platinum
Colaborador(a) | Parceiro Platinum

How to Detect mobile device on hubl coding?

resolver

😁

prasadcolumbus
Participante | Parceiro Diamante
Participante | Parceiro Diamante

How to Detect mobile device on hubl coding?

resolver

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

0 Avaliação positiva
stefen
Conselheiro(a) de destaque | Parceiro
Conselheiro(a) de destaque | Parceiro

How to Detect mobile device on hubl coding?

resolver

@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