Detect mobile / desktop screen on hubl coding?

[TimD1]

I've created a custom module with two diverent stages for desktop and mobile. To make sure not run into SEO trubble because of duplicate content I try to find a solution to caputure the browser widow/screen size in Hubl and diliver just necessary code.

Found this solution but unfortunately this will not work.
https://community.hubspot.com/t5/CMS-Development/How-to-Detect-mobile-device-on-hubl-coding/td-p/375...

I think the user-agent will not return any "mobile" string...

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

Hope somebody can help...
THX

[Thomastechweb]

{% set agent = request.headers['user-agent']|lower|string %}
{% set is_mobile = false %}
{% if agent is string_containing "mobile" || agent is string_containing "android" || agent is string_containing "iphone" %}
  {% set is_mobile = true %}
  YOUR MOBILE CONTENT GOES HERE......
{% else %}
  YOUR DESKTOP CONTENT GOES HERE......
{% endif %}

This should work better.
I've made some small changes to your if statement logic and added two OR conditions.  (can be expanded if needed)

- The code can also be made cleaner by removing the "is_mobile" variable unless you're going to use it somewhere else.

[TimD1]

Thank you @Thomastechweb for your feedback!
Your version works but unfortunately not that perfect in my case :-(.

My promblem in detail:
An agency created several custom moduls for us which has two (other modules have three) different design stages one for desktop and one for mobile (and sometimes one also for tablet). With media quiries the different stages will switch so nothing special. The problem is that this modul crates a lot of duplicate content because both parts are loading in the code.
Now I try to find a way to load just the moblie or the desktop part... Do you have any idea how to handle this?

Hope that makes sense 🙂

Best & THX
Tim

 

[Thomastechweb]

Ok, it's diffcult to write the entire solution without seeing all you code.
But here's a suggestion for mobile / desktop  (not tablet)  which should meet your needs:

If you change the code to and add it to the top your module:

{% set agent = request.headers['user-agent']|lower|string %}
{% set is_mobile = false %}
{% if agent is string_containing "mobile" || agent is string_containing "android" || agent is string_containing "iphone" %}
  {% set is_mobile = true %}
{% endif %}

Then you can wrap your mobile / desktop specific content with simple IF tests:

If mobile, show this

{% if is_mobile %}
<div class="d-lg-none">
<!-- Only show on mobile -->
</div>
{% endif %}

If not mobile show

{% if !is_mobile %}
<div class="d-none d-lg-block">
<!-- Only show on desktop -->
</div>
{% endif %}

[DeZinerly]

Hey, thanks a ton for the clear examples, @Thomastechweb! I just wanted to point out that an alternative to

{% if !is_mobile %}
...
{% endif %}

would be

{% unless is_mobile %}
...
{% endunless %}

Some HubL students finding this post (such as myself 🤠) may feel it's easier to scan their code logic this way.

[TimD1]

I think the main problem is the user-agent.  I've no idea how to handle changes in these agentes in future... I think i will run in a lot of problem with this 😞

But thanks a lot @Thomastechweb !