Mobile page support

Question

Is there any good practice to how to serve mobile pages differently from Twig?

What I would like to achieve is the following, right now we have pages like: http://myawsomecraftpage.com/stories/aaa-bbb-ccc

In the template we are doing many things differently, if the browser is mobile, or not mobile.

I would like to split the template, and have 1 for mobile 1 for desktop. The issue I also would like to cache this pages (ofc differently for mobile, and for desktop)

So the best practice would be to have pages like: http://myawsomecraftpage.com/m/stories/aaa-bbb-ccc

The issue here this is not supported in Craft routing... I mean to generate mobile-aware URL

So another option I guess to add another site right? like http://m.myawsomecraftpage.com/stories/aaa-bbb-ccc

This should work I guess...

So again, the issue here is we have different templates (optimization point of view) for desktop and mobile pages, and we would like to cache them (with bitz for example)

Answer 1

In general, I'd discourage the idea of having separate versions of a page depending on whether it is mobile or not. Typically you can do this more effectively via responsive design, media breakpoints, CSS Grid, and so on.

If you still really want to do it, you can have a conditional like:

{% if craft.app.request.isMobileBrowser() %}
    {% cache using key ("mobile" ~ craft.app.request.pathInfo) %}
        {% include "mobile-page.html" %}
    {% endcache %}
{% else %}
    {% cache using key ("desktop" ~ craft.app.request.pathInfo) %}
        {% include "desktop-page.html" %}
    {% endcache %}
{% endif %}

...but again, the idea of a separate mobile page vs. a desktop page is generally a bit dated these days.