Detect user agent jekyll

Question

I would like to render different html for desktop and mobile on jekyll. I need something like:

{% if is_mobile %}
    <!-- mobile html -->
{% else %}
    <!-- desktop html -->
(% endif %}

Obviously I could just use javascript in the browser to determine this but I don't want to render the extra html for mobiles.

Maybe I could create a jekyll plugin and register the liquid tag but how can I get access to the user agent? Is there anyway I can get access to HTTP request parameters?

Jekyll is a static site generator - so the user only sees the generated pages with no FrontMatter or liquid templates or whatsoever - only the served output. You have to use JavaScript for that as someone already has answered below. — michaPau, Apr 06 '16 at 16:19

JoostS · Answer 1 · 2016-04-09T17:35:20.890

1

In your layout you could use:

<div class="mobile">{% include mobile.html %}</div>
<div class="desktop">{% include desktop.html %}</div>

Then you should let js decide which one to show, as liquid has no access to the user agent.

edited Apr 09 '16 at 17:35

answered Apr 09 '16 at 15:10

JoostS

9,344
3
27
50

score 0 · Answer 2 · edited May 23 '17 at 12:15

0

Since you're using Jekyll I'm guessing you're not working with a backend which is typically how you'd process the User-Agent.

Perhaps your best approach is using accessing navigator.userAgent variable using plain-old Javascript.

More info here: Getting the User Agent with JavaScript

edited May 23 '17 at 12:15

Community

1
1

answered Apr 06 '16 at 15:43

Anthony E

10,363
2
20
42

Detect user agent jekyll

2 Answers2