<p>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.</p>

<p>If you still really want to do it, you can have a conditional like:</p>

<pre><code>{% 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 %}
</code></pre>

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

CC BY-SA 4.0
2018-10-12T03:25:31.413Z
This idea is great, but I do not want to load craft at all, I would like to load the nginx files html files which was stored. So I am not planing to use the mobile version (btw that was the solution what we have been used right now, and it is working fine). Reflecting the idea to have different file is oke, but I would like to serve different page for AMP and different page for desktop. Yes we can do it over responsive design, will consider that approach also...
Visky Máté
CC BY-SA 4.0
2018-10-12T05:34:02.510Z
As for amp, this might be a good resource https://www.google.com/amp/s/nystudio107.com/blog/google-amp-should-you-care/amp
Robin Schambach
CC BY-SA 4.0
2018-10-12T11:11:06.007Z
So if you want a different page for AMP, this is how I do it: https://nystudio107.com/blog/google-amp-should-you-care
andrew.welch
CC BY-SA 4.0
2018-10-12T03:21:02.087Z
2018-10-12T03:21:02.087Z
andrew.welch
<p>Is there any good practice to how to serve mobile pages differently from Twig?</p>

<p>What I would like to achieve is the following, right now we have pages like:
<a href="http://myawsomecraftpage.com/stories/aaa-bbb-ccc" rel="nofollow noreferrer">http://myawsomecraftpage.com/stories/aaa-bbb-ccc</a></p>

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

<p>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)</p>

<p>So the best practice would be to have pages like:
<a href="http://myawsomecraftpage.com/m/stories/aaa-bbb-ccc" rel="nofollow noreferrer">http://myawsomecraftpage.com/m/stories/aaa-bbb-ccc</a></p>

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

<p>So another option I guess to add another site right? like
<a href="http://m.myawsomecraftpage.com/stories/aaa-bbb-ccc" rel="nofollow noreferrer">http://m.myawsomecraftpage.com/stories/aaa-bbb-ccc</a></p>

<p>This should work I guess...</p>

<p>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)</p>

<templating><cache>
Mobile page support
# Mobile page support

(Asked by: username_0 on 2018-10-12)

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)

**Tags:** templating, cache

---

## 1 answers

### Answer by username_1 on 2018-10-12. Score: 2

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.

> **Comments:**
> **username_0**: This idea is great, but I do not want to load craft at all, I would like to load the nginx files html files which was stored. So I am not planing to use the mobile version (btw that was the solution what we have been used right now, and it is working fine). Reflecting the idea to have different file is oke, but I would like to serve different page for AMP and different page for desktop. Yes we can do it over responsive design, will consider that approach also...  
> **username_2**: As for amp, this might be a good resource https://www.google.com/amp/s/nystudio107.com/blog/google-amp-should-you-care/amp  
> **username_1**: So if you want a different page for AMP, this is how I do it: https://nystudio107.com/blog/google-amp-should-you-care  

---

