how to detect screen size or mobile/desktop using twig

Question

I am currently using twig as my templating engine and I wanted to load different url of an image when the site is loaded using mobile vs desktop. Is there an easy way to do this?

So I wanted to do something like this:

{% if (mobile) %}
   <img src="{{ picture.getLowresimageurl() }}"/>
{% else %}
   <img src="{{ picture.getMedresimageurl() }}"/>
{% endif %}

is there a way to do this?

Solution

You can use MobileDetectBundle for detecting mobile devices, manage mobile view and redirect to the mobile and tablet version

Twig Helper

{% if is_mobile() %}
{% if is_tablet() %}
{% if is_device('iphone') %} # magic methods is[...]

Twig examples

{% if is_mobile_view() %}
    {% extends "MyBundle:Layout:mobile.html.twig" %}
{% else if is_tablet_view() %}
    {% extends "MyBundle:Layout:tablet.html.twig" %}
{% else if is_full_view() or is_not_mobile_view() %}
    {% extends "MyBundle:Layout:full.html.twig" %}
{% endif %}