I'm asking here because I have not been able to find the answer anywhere. I am using Roundcube to build a web mail application.
My problem is that I would like to change the condition depending on the screen/viewport width. Basically depending on if the user is using mobile, tablet or desktop. What I want to do is show a div if the user is on mobile or tablet, but not on desktop, or the other way around.
I was thinking of just adding media queries to the CSS but I'm not sure it will work like I want to. It is very important that the desktop content is not loaded in any way in the mobile view and the other way around. It has to do with advertising, revenue and SEO.
So I was thinking something along the lines of this:
<roundcube:container name="container-desktop" id="container-desktop" condition="!myCondition" />
<roundcube:container name="container-mobile" id="container-mobile" condition="myCondition" />
where myCondition
is based on viewport width.
I have not been able to find this in any way. Is there someone who knows hos this can be achieved?